[{"data":1,"prerenderedAt":1532},["ShallowReactive",2],{"navigation":3,"\u002Fcontent\u002Fcontent-accessibility":439},[4,30,256,281,366,375,402,424],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"\u002Fgetting-started","1.getting-started",[10,15,20,25],{"title":11,"path":12,"stem":13,"icon":14},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":16,"path":17,"stem":18,"icon":19},"Nuxt","\u002Fgetting-started\u002Fnuxt","1.getting-started\u002F3.nuxt","i-lucide-mountain",{"title":21,"path":22,"stem":23,"icon":24},"Theming","\u002Fgetting-started\u002Ftheming","1.getting-started\u002F4.theming","i-lucide-palette",{"title":26,"path":27,"stem":28,"icon":29},"MCP","\u002Fgetting-started\u002Fmcp","1.getting-started\u002F5.mcp","i-lucide-plug",{"title":31,"icon":6,"path":32,"stem":33,"children":34,"page":6},"Components","\u002Fcomponents","2.components",[35,43,51,59,67,75,83,92,100,104,108,116,124,133,141,149,157,166,174,182,191,199,203,211,220,228,236,240,248],{"title":36,"path":37,"stem":38,"children":39,"page":6},"Accordion","\u002Fcomponents\u002Faccordion","2.components\u002F01.accordion",[40],{"title":36,"path":41,"stem":42},"\u002Fcomponents\u002Faccordion\u002Foverview","2.components\u002F01.accordion\u002F1.overview",{"title":44,"path":45,"stem":46,"children":47,"page":6},"Alert","\u002Fcomponents\u002Falert","2.components\u002F02.alert",[48],{"title":44,"path":49,"stem":50},"\u002Fcomponents\u002Falert\u002Foverview","2.components\u002F02.alert\u002F1.overview",{"title":52,"path":53,"stem":54,"children":55,"page":6},"Button","\u002Fcomponents\u002Fbutton","2.components\u002F03.button",[56],{"title":52,"path":57,"stem":58},"\u002Fcomponents\u002Fbutton\u002Foverview","2.components\u002F03.button\u002F1.overview",{"title":60,"path":61,"stem":62,"children":63,"page":6},"Card","\u002Fcomponents\u002Fcard","2.components\u002F04.card",[64],{"title":60,"path":65,"stem":66},"\u002Fcomponents\u002Fcard\u002Foverview","2.components\u002F04.card\u002F1.overview",{"title":68,"path":69,"stem":70,"children":71,"page":6},"Carousel","\u002Fcomponents\u002Fcarousel","2.components\u002F05.carousel",[72],{"title":68,"path":73,"stem":74},"\u002Fcomponents\u002Fcarousel\u002Foverview","2.components\u002F05.carousel\u002F1.overview",{"title":76,"path":77,"stem":78,"children":79,"page":6},"Checkbox","\u002Fcomponents\u002Fcheckbox","2.components\u002F06.checkbox",[80],{"title":76,"path":81,"stem":82},"\u002Fcomponents\u002Fcheckbox\u002Foverview","2.components\u002F06.checkbox\u002F1.overview",{"title":84,"path":85,"stem":86,"children":87,"page":6},"Date Picker","\u002Fcomponents\u002Fdate-picker","2.components\u002F07.date-picker",[88],{"title":89,"path":90,"stem":91},"Date picker","\u002Fcomponents\u002Fdate-picker\u002Foverview","2.components\u002F07.date-picker\u002F1.overview",{"title":93,"path":94,"stem":95,"children":96,"page":6},"Dropdown","\u002Fcomponents\u002Fdropdown","2.components\u002F08.dropdown",[97],{"title":93,"path":98,"stem":99},"\u002Fcomponents\u002Fdropdown\u002Foverview","2.components\u002F08.dropdown\u002F1.overview",{"title":101,"path":102,"stem":103},"Heading","\u002Fcomponents\u002Fheading","2.components\u002F09.heading",{"title":105,"path":106,"stem":107},"Icon","\u002Fcomponents\u002Ficon","2.components\u002F10.icon",{"title":109,"path":110,"stem":111,"children":112,"page":6},"Input","\u002Fcomponents\u002Finput","2.components\u002F11.input",[113],{"title":109,"path":114,"stem":115},"\u002Fcomponents\u002Finput\u002Foverview","2.components\u002F11.input\u002F1.overview",{"title":117,"path":118,"stem":119,"children":120,"page":6},"Label","\u002Fcomponents\u002Flabel","2.components\u002F12.label",[121],{"title":117,"path":122,"stem":123},"\u002Fcomponents\u002Flabel\u002Foverview","2.components\u002F12.label\u002F1.overview",{"title":125,"path":126,"stem":127,"children":128,"page":6},"Phone Number","\u002Fcomponents\u002Fphone-number","2.components\u002F13.phone-number",[129],{"title":130,"path":131,"stem":132},"Phone number","\u002Fcomponents\u002Fphone-number\u002Foverview","2.components\u002F13.phone-number\u002F1.overview",{"title":134,"path":135,"stem":136,"children":137,"page":6},"Popover","\u002Fcomponents\u002Fpopover","2.components\u002F14.popover",[138],{"title":134,"path":139,"stem":140},"\u002Fcomponents\u002Fpopover\u002Foverview","2.components\u002F14.popover\u002F1.overview",{"title":142,"path":143,"stem":144,"children":145,"page":6},"Quantity","\u002Fcomponents\u002Fquantity","2.components\u002F15.quantity",[146],{"title":142,"path":147,"stem":148},"\u002Fcomponents\u002Fquantity\u002Foverview","2.components\u002F15.quantity\u002F1.overview",{"title":150,"path":151,"stem":152,"children":153,"page":6},"Radio","\u002Fcomponents\u002Fradio","2.components\u002F16.radio",[154],{"title":150,"path":155,"stem":156},"\u002Fcomponents\u002Fradio\u002Foverview","2.components\u002F16.radio\u002F1.overview",{"title":158,"path":159,"stem":160,"children":161,"page":6},"Radio Group","\u002Fcomponents\u002Fradio-group","2.components\u002F17.radio-group",[162],{"title":163,"path":164,"stem":165},"Radio group","\u002Fcomponents\u002Fradio-group\u002Foverview","2.components\u002F17.radio-group\u002F1.overview",{"title":167,"path":168,"stem":169,"children":170,"page":6},"Rating","\u002Fcomponents\u002Frating","2.components\u002F18.rating",[171],{"title":167,"path":172,"stem":173},"\u002Fcomponents\u002Frating\u002Foverview","2.components\u002F18.rating\u002F1.overview",{"title":175,"path":176,"stem":177,"children":178,"page":6},"Required","\u002Fcomponents\u002Frequired","2.components\u002F19.required",[179],{"title":175,"path":180,"stem":181},"\u002Fcomponents\u002Frequired\u002Foverview","2.components\u002F19.required\u002F1.overview",{"title":183,"path":184,"stem":185,"children":186,"page":6},"Scroll Area","\u002Fcomponents\u002Fscroll-area","2.components\u002F20.scroll-area",[187],{"title":188,"path":189,"stem":190},"Scroll area","\u002Fcomponents\u002Fscroll-area\u002Foverview","2.components\u002F20.scroll-area\u002F1.overview",{"title":192,"path":193,"stem":194,"children":195,"page":6},"Select","\u002Fcomponents\u002Fselect","2.components\u002F21.select",[196],{"title":192,"path":197,"stem":198},"\u002Fcomponents\u002Fselect\u002Foverview","2.components\u002F21.select\u002F1.overview",{"title":200,"path":201,"stem":202},"Spinner","\u002Fcomponents\u002Fspinner","2.components\u002F22.spinner",{"title":204,"path":205,"stem":206,"children":207,"page":6},"Switch","\u002Fcomponents\u002Fswitch","2.components\u002F23.switch",[208],{"title":204,"path":209,"stem":210},"\u002Fcomponents\u002Fswitch\u002Foverview","2.components\u002F23.switch\u002F1.overview",{"title":212,"path":213,"stem":214,"children":215,"page":6},"Tab Badge","\u002Fcomponents\u002Ftab-badge","2.components\u002F24.tab-badge",[216],{"title":217,"path":218,"stem":219},"Tab badge","\u002Fcomponents\u002Ftab-badge\u002Foverview","2.components\u002F24.tab-badge\u002F1.overview",{"title":221,"path":222,"stem":223,"children":224,"page":6},"Tabs","\u002Fcomponents\u002Ftabs","2.components\u002F25.tabs",[225],{"title":221,"path":226,"stem":227},"\u002Fcomponents\u002Ftabs\u002Foverview","2.components\u002F25.tabs\u002F1.overview",{"title":229,"path":230,"stem":231,"children":232,"page":6},"Tag","\u002Fcomponents\u002Ftag","2.components\u002F26.tag",[233],{"title":229,"path":234,"stem":235},"\u002Fcomponents\u002Ftag\u002Foverview","2.components\u002F26.tag\u002F1.overview",{"title":237,"path":238,"stem":239},"Text","\u002Fcomponents\u002Ftext","2.components\u002F27.text",{"title":241,"path":242,"stem":243,"children":244,"page":6},"Textarea","\u002Fcomponents\u002Ftextarea","2.components\u002F28.textarea",[245],{"title":241,"path":246,"stem":247},"\u002Fcomponents\u002Ftextarea\u002Foverview","2.components\u002F28.textarea\u002F1.overview",{"title":249,"path":250,"stem":251,"children":252,"page":6},"Tooltip","\u002Fcomponents\u002Ftooltip","2.components\u002F29.tooltip",[253],{"title":249,"path":254,"stem":255},"\u002Fcomponents\u002Ftooltip\u002Foverview","2.components\u002F29.tooltip\u002F1.overview",{"title":257,"icon":6,"path":258,"stem":259,"children":260,"page":6},"Foundations","\u002Ffoundations","2.foundations",[261,269,273,277],{"title":262,"icon":6,"path":263,"stem":264,"children":265,"page":6},"Color","\u002Ffoundations\u002Fcolor","2.foundations\u002F1.color",[266],{"title":262,"path":267,"stem":268},"\u002Ffoundations\u002Fcolor\u002Foverview","2.foundations\u002F1.color\u002F1.overview",{"title":270,"path":271,"stem":272},"Icons","\u002Ffoundations\u002Ficons","2.foundations\u002F2.icons",{"title":274,"path":275,"stem":276},"Logos and Pins","\u002Ffoundations\u002Flogos-and-pins","2.foundations\u002F3.logos-and-pins",{"title":278,"path":279,"stem":280},"Web layers","\u002Ffoundations\u002Fweb-layers","2.foundations\u002F4.web-layers",{"title":282,"icon":6,"path":283,"stem":284,"children":285,"page":6},"WIP","\u002Fwip","3.wip",[286,290,294,298,302,306,310,314,318,322,326,330,334,338,342,346,350,354,358,362],{"title":287,"path":288,"stem":289},"Additional","\u002Fwip\u002Fadditional","3.wip\u002Fadditional",{"title":291,"path":292,"stem":293},"Alt text","\u002Fwip\u002Falt-text","3.wip\u002Falt-text",{"title":295,"path":296,"stem":297},"AnnouncementBar","\u002Fwip\u002Fannouncement-bar","3.wip\u002Fannouncement-bar",{"title":299,"path":300,"stem":301},"Avatar","\u002Fwip\u002Favatar","3.wip\u002Favatar",{"title":303,"path":304,"stem":305},"Banner","\u002Fwip\u002Fbanner","3.wip\u002Fbanner",{"title":307,"path":308,"stem":309},"Breadcrumbs","\u002Fwip\u002Fbreadcrumbs","3.wip\u002Fbreadcrumbs",{"title":311,"path":312,"stem":313},"Divider & scroll","\u002Fwip\u002Fdivider-scroll","3.wip\u002Fdivider-scroll",{"title":315,"path":316,"stem":317},"FieldMessage","\u002Fwip\u002Ffield-message","3.wip\u002Ffield-message",{"title":319,"path":320,"stem":321},"Focus Ring","\u002Fwip\u002Ffocus-ring","3.wip\u002Ffocus-ring",{"title":323,"path":324,"stem":325},"InlineSeparator","\u002Fwip\u002Finline-separator","3.wip\u002Finline-separator",{"title":327,"path":328,"stem":329},"Modal & drawer","\u002Fwip\u002Fmodal-drawer","3.wip\u002Fmodal-drawer",{"title":331,"path":332,"stem":333},"Optional","\u002Fwip\u002Foptional","3.wip\u002Foptional",{"title":335,"path":336,"stem":337},"Pagination","\u002Fwip\u002Fpagination","3.wip\u002Fpagination",{"title":339,"path":340,"stem":341},"PasswordInput","\u002Fwip\u002Fpassword-input","3.wip\u002Fpassword-input",{"title":343,"path":344,"stem":345},"Pinned bar page","\u002Fwip\u002Fpinned-bar-page","3.wip\u002Fpinned-bar-page",{"title":347,"path":348,"stem":349},"PromotionalBar","\u002Fwip\u002Fpromotional-bar","3.wip\u002Fpromotional-bar",{"title":351,"path":352,"stem":353},"SearchInput","\u002Fwip\u002Fsearch-input","3.wip\u002Fsearch-input",{"title":355,"path":356,"stem":357},"StatusLine","\u002Fwip\u002Fstatus-line","3.wip\u002Fstatus-line",{"title":359,"path":360,"stem":361},"Stepper & loaderBar","\u002Fwip\u002Fstepper-loader-bar","3.wip\u002Fstepper-loader-bar",{"title":363,"path":364,"stem":365},"TextInput","\u002Fwip\u002Ftext-input","3.wip\u002Ftext-input",{"title":367,"icon":6,"path":368,"stem":369,"children":370,"page":6},"Overview","\u002Foverview","4.overview",[371],{"title":372,"path":373,"stem":374},"For developers","\u002Foverview\u002Ffor-developers","4.overview\u002F1.for-developers",{"title":376,"icon":6,"path":377,"stem":378,"children":379,"page":6},"Brand","\u002Fbrand","5.brand",[380,389],{"title":381,"icon":6,"path":382,"stem":383,"children":384,"page":6},"Brand guidelines","\u002Fbrand\u002Fbrand-guidelines","5.brand\u002F1.brand-guidelines",[385],{"title":386,"path":387,"stem":388},"Dr. Max Trademarks Guidelines","\u002Fbrand\u002Fbrand-guidelines\u002Fdr-max-trademarks-guidelines","5.brand\u002F1.brand-guidelines\u002F2.dr-max-trademarks-guidelines",{"title":390,"icon":6,"path":391,"stem":392,"children":393,"page":6},"Assets","\u002Fbrand\u002Fassets","5.brand\u002F2.assets",[394,398],{"title":395,"path":396,"stem":397},"Logos","\u002Fbrand\u002Fassets\u002Flogos","5.brand\u002F2.assets\u002F2.logos",{"title":399,"path":400,"stem":401},"Dr. Max Tagline","\u002Fbrand\u002Fassets\u002Fdr-max-tagline","5.brand\u002F2.assets\u002F3.dr-max-tagline",{"title":403,"icon":6,"path":404,"stem":405,"children":406,"page":6},"Content","\u002Fcontent","6.content",[407,411],{"title":408,"path":409,"stem":410},"Content accessibility","\u002Fcontent\u002Fcontent-accessibility","6.content\u002F1.content-accessibility",{"title":412,"icon":6,"path":413,"stem":414,"children":415,"page":6},"Content guidance","\u002Fcontent\u002Fcontent-guidelines","6.content\u002F2.content-guidelines",[416,420],{"title":417,"path":418,"stem":419},"Category color-coding","\u002Fcontent\u002Fcontent-guidelines\u002Fcategory-color-coding","6.content\u002F2.content-guidelines\u002F2.category-color-coding",{"title":421,"path":422,"stem":423},"Pop-up banners","\u002Fcontent\u002Fcontent-guidelines\u002Fpop-up-banners","6.content\u002F2.content-guidelines\u002F3.pop-up-banners",{"title":425,"icon":6,"path":426,"stem":427,"children":428,"page":6},"Accessibility","\u002Faccessibility","7.accessibility",[429],{"title":430,"path":431,"stem":432,"children":433,"icon":6},"Accessibility guidance","\u002Faccessibility\u002Faccessibility-guidance","7.accessibility\u002F1.accessibility-guidance\u002F1.index",[434,435],{"title":425,"path":431,"stem":432},{"title":436,"path":437,"stem":438},"Understanding WCAG 2.2","\u002Faccessibility\u002Faccessibility-guidance\u002Funderstanding-wcag-2-2","7.accessibility\u002F1.accessibility-guidance\u002F2.understanding-wcag-2-2",{"id":440,"title":408,"body":441,"description":1525,"extension":1526,"links":1527,"meta":1528,"navigation":1529,"path":409,"seo":1530,"stem":410,"__hash__":1531},"docs\u002F6.content\u002F1.content-accessibility.md",{"type":442,"value":443,"toc":1485},"minimark",[444,452,457,461,464,470,475,482,489,492,498,504,508,513,532,537,540,544,547,551,556,559,566,571,588,598,602,605,610,613,618,622,628,631,635,641,644,648,651,656,667,674,680,685,692,696,701,712,717,725,730,738,745,749,752,758,761,767,785,789,792,823,828,839,844,849,855,863,870,874,877,882,903,907,915,921,926,933,937,940,944,947,951,959,965,970,980,987,991,994,999,1006,1012,1017,1024,1027,1033,1036,1039,1045,1048,1055,1059,1065,1070,1073,1080,1083,1089,1092,1099,1102,1109,1113,1121,1128,1133,1139,1144,1151,1155,1158,1162,1168,1173,1195,1199,1207,1214,1218,1221,1226,1237,1242,1253,1258,1269,1287,1294,1298,1301,1305,1312,1317,1335,1339,1347,1354,1358,1361,1367,1371,1385,1389,1392,1399,1403,1407,1412,1423,1428,1436,1441,1446,1451,1456,1460,1468,1472],[445,446,447],"p",{},[448,449],"img",{"alt":450,"src":451},"A green gradient banner featuring the Dr.Max logo at the top center and large white text reading ‘Content Accessibility’ in the middle.","\u002Fimages\u002Fcontent-accessibility-hero.png",[453,454,456],"h2",{"id":455},"_01-introduction","01. Introduction",[458,459,408],"h3",{"id":460},"content-accessibility",[445,462,463],{},"By making sure that every text, visual content, and element we create is accessible to all, we show that we care – both about what we do, and for whom we do it.",[445,465,466],{},[467,468,469],"strong",{},"We care that everyone has an access to what we do: they see it, use it, and understand it.",[445,471,472],{},[467,473,474],{},"Why these guidelines matter?",[445,476,477,478,481],{},"Accessibility ",[467,479,480],{},"improves the experience for all users",", not just those with specific accessibility needs.",[445,483,484,485,488],{},"It shows our professionalism and attention to detail – ",[467,486,487],{},"building lasting trust",".",[445,490,491],{},"This document helps us align with the Web Content Accessibility Guidelines (WCAG), and reflects the recent European Accessibility Act (EAA) and local regulations.",[445,493,494],{},[448,495],{"alt":496,"src":497},"A horizontal, pill-shaped banner split into two sections: the left half is solid dark green with the white text “Key accessibility principles,” and the right half is outlined in light green with the green text “Perceivable | Operable | Understandable.”","\u002Fimages\u002Fcontent-accessibility-principles.png",[445,499,500],{},[501,502,503],"em",{},"Key Accessibility Principles: Perceivable | Operable | Understandable",[458,505,507],{"id":506},"what-do-we-cover","What do we cover?",[445,509,510],{},[467,511,512],{},"Simple rules",[514,515,516,520,523,526,529],"ul",{},[517,518,519],"li",{},"Writing alt texts for images and banners",[517,521,522],{},"Structuring text properly for them to be accessible",[517,524,525],{},"Using colors and contrasts safely",[517,527,528],{},"Making links, buttons, and navigation clear and usable",[517,530,531],{},"Handling content from external tools",[445,533,534],{},[467,535,536],{},"Structure",[445,538,539],{},"For each of the three key accessibility principles – for it to be perceivable, operable, and understandable – there are specific requirements (“success criteria”) and examples provided bellow.",[453,541,543],{"id":542},"_02-perceivable","02. Perceivable",[445,545,546],{},"Users can recognise and use our service with the senses that are available to them",[458,548,550],{"id":549},"alt-text-images-and-assets","Alt text: images and assets",[445,552,553],{},[467,554,555],{},"Why alt texts?",[445,557,558],{},"Alt texts help users who cannot see images understand the content. They are important for accessibility, as well as SEO.",[445,560,561,562,565],{},"All non-text content (images, video, audio, buttons, and other content that isn’t conveyed by text) ",[467,563,564],{},"needs to have alt text"," that provides the same information found in the content.",[445,567,568],{},[467,569,570],{},"How to write an alt text?",[514,572,573,576,579,582,585],{},[517,574,575],{},"Describe the main idea of the image.",[517,577,578],{},"Focus only on what is important for the user to know.",[517,580,581],{},"Be brief and specific (ideally 5–15 words).",[517,583,584],{},"If the image has visible text, include it in the alt description.",[517,586,587],{},"Do not repeat obvious information (e.g., \"photo of...\").",[589,590,591],"tip",{},[445,592,593,594,597],{},"💚 ",[467,595,596],{},"Care to remember:"," Alt text should contain keywords, but it must be concise and accurate.",[458,599,601],{"id":600},"alt-text-do-dont","Alt text: do & don’t",[445,603,604],{},"If the image is purely decorative (such as a dividing line between sections):",[514,606,607],{},[517,608,609],{},"Leave the alt text empty (set as \"\") so screen readers skip it.",[445,611,612],{},"Alt texts for images in product galleries are generated automatically and cannot be changed.",[514,614,615],{},[517,616,617],{},"However, you can add suitable alt texts manually for images used in extra content created in the page builder.",[458,619,621],{"id":620},"do","Do",[445,623,624],{},[448,625],{"alt":626,"src":627},"“Good alt text implementation of a pregnant woman in a grey shirt gently holding her belly, and the text below it says ‘Alt text: Pregnant woman in a grey shirt gently holding her belly.’”","\u002Fimages\u002Fcontent-accessibility-alt-text-do.png",[445,629,630],{},"Pregnant woman in a grey shirt gently\nholding her belly",[458,632,634],{"id":633},"dont","Don't",[445,636,637],{},[448,638],{"alt":639,"src":640},"“Bad alt text implementation of a pregnant woman in a grey shirt gently holding her belly, and the text below it says ‘Alt text: Top 10 tips for a healthy pregnancy.’”","\u002Fimages\u002Fcontent-accessibility-alt-text-dont.png",[445,642,643],{},"Top 10 tips for a healthy pregnancy",[458,645,647],{"id":646},"alt-text-graphics-banners","Alt text: graphics, banners",[445,649,650],{},"Visual banners often carry important messages – but not everyone can see them.",[445,652,653],{},[467,654,655],{},"To make sure no one misses key information:",[514,657,658,661,664],{},[517,659,660],{},"In general, avoid placing key text inside images only – write it outside of them as well.",[517,662,663],{},"Whenever text is part of a graphic, include the same wording in the alt text.",[517,665,666],{},"When you receive such a banner, add a clear alt text describing what it says. For instance here, the alternative description should contain ”Advantageous club prices\".",[445,668,669,670,673],{},"Correct alt text for this image: \"",[501,671,672],{},"Text on the left that reads ‘Advantageous club prices,’ a Dr. Max Club card graphic in the center, and on the right a smiling elderly woman holding a wallet with a young girl beside her standing in a pharmacy aisle.","\"",[445,675,676],{},[448,677],{"alt":678,"src":679},"Horizontal banner with a solid green background on the left that reads ‘Advantageous club prices,’ a Dr.Max Club card graphic in the center, and on the right a smiling elderly woman holding a wallet with a young girl beside her standing in a pharmacy aisle.","\u002Fimages\u002Fcontent-accessibility-banner-alt-text.jpeg",[445,681,682],{},[501,683,684],{},"Example banner illustrating the Dr.Max Club promotion",[589,686,687],{},[445,688,593,689,691],{},[467,690,596],{}," Alt text should reflect the core meaning of the picture through non-visual means – avoid writing misleading, redundant or incomplete information.",[458,693,695],{"id":694},"alt-text-correct-text-formatting","Alt text: correct text formatting",[445,697,698],{},[467,699,700],{},"Use headings and paragraphs correctly:",[514,702,703,706,709],{},[517,704,705],{},"Headings (H1–H6) are for titles and section names.",[517,707,708],{},"Paragraphs are for regular text.",[517,710,711],{},"Also make sure that that headings accurately identify the content of their section.",[445,713,714],{},[467,715,716],{},"Spacing is caring:",[514,718,719,722],{},[517,720,721],{},"Segment your content using diverse elements like bullet points, icons, and generous whitespace.",[517,723,724],{},"It reduces cognitive load, supports focus, and makes information easier to scan and remember.",[445,726,727],{},[467,728,729],{},"Why it matters:",[514,731,732,735],{},[517,733,734],{},"Screen readers and assistive tools rely on correct structure.",[517,736,737],{},"Good structure helps users navigate quickly – especially on mobile.",[589,739,740],{},[445,741,593,742,744],{},[467,743,596],{}," Before publishing, scan your page: can you understand the main points just by reading the headings? If not, adjust them.",[458,746,748],{"id":747},"text-structure-tips","Text structure: tips",[445,750,751],{},"✅ Each page should have a clear heading hierarchy (H1 first, then H2, H3...).",[445,753,754,755,488],{},"✅ Do not use a ",[467,756,757],{},"paragraph styled to look like a headline – use real headings",[445,759,760],{},"✅ Keep paragraphs short and simple for better readability.",[445,762,763],{},[448,764],{"alt":765,"src":766},"Illustration of a webpage wireframe with Title H1, Paragraph, Image and Heading 2 H2 labels.","\u002Fimages\u002Fcontent-accessibility-semantic-structure.jpeg",[445,768,769],{},[501,770,771,772,776,777,776,779,781,782,784],{},"Diagram demonstrating how the HTML semantic elements ",[773,774,775],"code",{},"h1",", ",[773,778,445],{},[773,780,448],{}," and ",[773,783,453],{}," map to sections of a webpage layout.",[458,786,788],{"id":787},"coloring-contrast","Coloring: contrast",[445,790,791],{},"To ensure visibility and accessibility, all colour combinations must meet WCAG 2.1 contrast standards:",[514,793,794,800,807,817],{},[517,795,796,797],{},"Minimum 4.5:1 contrast ratio for ",[467,798,799],{},"normal text",[517,801,802,803,806],{},"Minimum 3:1 for ",[467,804,805],{},"large tex","t (above 24 px), as well as icons and UI graphics",[517,808,809,810,781,813,816],{},"Always test ",[467,811,812],{},"light-on-dark",[467,814,815],{},"dark-on-light"," combinations",[517,818,819,820],{},"Ensure readability on both ",[467,821,822],{},"digital and print surfaces",[445,824,825],{},[467,826,827],{},"Incidental content:",[514,829,830,836],{},[517,831,832,833],{},"Text or images of text that are inactive (e.g. disabled buttons), purely decorative, hidden, or part of a complex image ",[467,834,835],{},"have no contrast requirement.",[517,837,838],{},"Nevertheless, aim for at least 3:1 when possible for the best clarity.",[445,840,841],{},[467,842,843],{},"Logotypes:",[514,845,846],{},[517,847,848],{},"Text within logos or brand names is exempt from contrast rules.",[445,850,851],{},[852,853,854],"a",{"href":418},"See detailed examples of accessible colour use in the dedicated Content Guidelines",[445,856,857],{},[852,858,862],{"href":859,"rel":860},"https:\u002F\u002Fv0-color-contrast-checker-orcin.vercel.app\u002F",[861],"nofollow","Double-check your contrast with the Dr. Max Colour Checker",[589,864,865],{},[445,866,593,867,869],{},[467,868,596],{}," Contrast isn’t about colour – it’s about clarity. Always test it first.",[458,871,873],{"id":872},"font-size-and-readability","Font size and readability",[445,875,876],{},"Small text is one of the biggest barriers to accessibility.",[445,878,879],{},[467,880,881],{},"Size & spacing:",[514,883,884,895],{},[517,885,886,887],{},"Use a minimum font size of 16 pixels across all Dr. Max content.\n",[514,888,889,892],{},[517,890,891],{},"14 pixels is the absolute minimum (use only in justified exceptions).",[517,893,894],{},"Reminder: When using pagebuilder-integrated fonts, spacing\u002Fsizing is already handled – just double check visually.",[517,896,897,898],{},"Ensure enough line height and margins so the text feels open, not cramped.\n",[514,899,900],{},[517,901,902],{},"This assists users with dyslexia and makes it more comfortable for all.",[445,904,905],{},[467,906,729],{},[514,908,909,912],{},[517,910,911],{},"Small text is hard to read – especially for older users and on some mobile devices.",[517,913,914],{},"Bigger, clear fonts help everyone absorb information faster and more comfortably.",[445,916,917],{},[448,918],{"alt":919,"src":920},"A three-line comparison of font-size guidelines. The top line shows a red X icon followed by red text: ‘Too small (10px – NOT recommended): Special offer: 10 % off selected vitamins this weekend only.’ The middle line shows a single green check icon and green text: ‘Bare minimum (14px – acceptable): Special offer: 10 % off selected vitamins this weekend only.’ The bottom line shows two green check icons and green text: ‘Preferred (16px – recommended baseline for comfort): Special offer: 10 % off selected vitamins this weekend only.","\u002Fimages\u002Fcontent-accessibility-font-sizes.png",[445,922,923],{},[501,924,925],{},"Example illustrating that 10 px text is too small, 14 px is acceptable, and 16 px is the preferred baseline for comfortable reading.",[589,927,928],{},[445,929,593,930,932],{},[467,931,596],{}," If you have to zoom in to read something – it’s usually too small.",[453,934,936],{"id":935},"_03-operable","03. Operable",[445,938,939],{},"Make sure users can find and use your content, regardless of how they choose to access it.",[458,941,943],{"id":942},"descriptive-linking","Descriptive linking",[445,945,946],{},"Use descriptive links so users know where a link will take them, or what downloadable linked content is.",[445,948,949],{},[467,950,729],{},[514,952,953,956],{},[517,954,955],{},"Screen readers read links separately – \"Click here\" or \"More\" is confusing.",[517,957,958],{},"Clear links help users navigate confidently.",[445,960,961],{},[448,962],{"alt":963,"src":964},"A white banner displaying a Dr.Max logo on the left and a cookie-consent message on the right. The message headline reads ‘This website uses cookies.’ Below, explanatory text describes how cookies improve experience and may share information with partners. A second paragraph says, ‘We retain your consent to the cookie settings for one year. You can adjust this setting at any time HERE.’ At the bottom, it adds, ‘To learn more, see our cookie statement,’ with ‘cookie statement’ in green to indicate a link.","\u002Fimages\u002Fcontent-accessibility-descriptive-links.jpeg",[445,966,967],{},[501,968,969],{},"Example of poorly written link in a cookie-consent banner",[445,971,972,973,975,976,979],{},"When visually impaired users use assistive technologies to display a list of links, a link labeled simply as \"HERE\" does not tell them where it leads. Instead, always use meaningful link text that describes the destination — for example: ✅ ",[467,974,621],{}," \"Cookie Statement\" ❌ ",[467,977,978],{},"Don’t"," \"Click here.\"",[589,981,982],{},[445,983,593,984,986],{},[467,985,596],{}," Imagine reading only the link – would you understand where it leads?",[458,988,990],{"id":989},"button-sizing-and-spacing","Button sizing and spacing",[445,992,993],{},"Buttons should be easy to click — for everyone. Follow these simple rules to make sure interactive elements are big enough or well-spaced so they are easy to select.",[445,995,996],{},[467,997,998],{},"Size for buttons:",[445,1000,1001,1002,1005],{},"Recommended: ",[467,1003,1004],{},"44 x 44 pixels"," (recommended for touchscreens, mobile, and desktop users)",[445,1007,1008,1009],{},"Minimum: ",[467,1010,1011],{},"24 x 24 pixels",[445,1013,1014],{},[467,1015,1016],{},"Space around buttons:",[445,1018,1019,1020,1023],{},"Ensure at least ",[467,1021,1022],{},"8px"," spacing between touch targets.",[458,1025,621],{"id":1026},"do-1",[445,1028,1029],{},[448,1030],{"alt":1031,"src":1032},"wo green rectangular buttons placed horizontally with space between them. The left button reads ‘Vybrat přípravek pro psa.’ The right button reads ‘Vybrat přípravek pro kočku.","\u002Fimages\u002Fcontent-accessibility-button-spacing-do.jpg",[445,1034,1035],{},"Correct spacing",[458,1037,634],{"id":1038},"dont-1",[445,1040,1041],{},[448,1042],{"alt":1043,"src":1044},"Two green rectangular buttons stacked vertically. The top button reads ‘Vybrat přípravek pro psa.’ The bottom button reads ‘Vybrat přípravek pro kočku.","\u002Fimages\u002Fcontent-accessibility-button-spacing-dont.jpg",[445,1046,1047],{},"Wrong spacing",[589,1049,1050],{},[445,1051,593,1052,1054],{},[467,1053,596],{}," Test with your own finger — can you tap each area without misclicking?",[458,1056,1058],{"id":1057},"third-party-tools-and-responsibility","Third-party tools and responsibility",[445,1060,1061,1062,488],{},"Even if a feature (like a chat widget, review tool, video player, or consultant pop-up) is provided by a third party, ",[467,1063,1064],{},"users perceive it as a part of our website",[445,1066,1067],{},[467,1068,1069],{},"What to check when using external tools:",[445,1071,1072],{},"Is it readable and accessible on all devices (desktop and mobile)?",[514,1074,1075],{},[517,1076,1077],{},[467,1078,1079],{},"Flag it if not",[445,1081,1082],{},"Does it work with screen readers and keyboard navigation?",[514,1084,1085],{},[517,1086,1087],{},[467,1088,1079],{},[445,1090,1091],{},"Does it block or cover important content?",[514,1093,1094],{},[517,1095,1096],{},[467,1097,1098],{},"Change the content accordingly if so",[445,1100,1101],{},"Is it clear what the tool does, and how to interact with it?",[514,1103,1104],{},[517,1105,1106],{},[467,1107,1108],{},"Explain in content, or flag it if it is beyond simple explaining",[445,1110,1111],{},[467,1112,729],{},[514,1114,1115,1118],{},[517,1116,1117],{},"Customers don't know (or care) who built a tool – they expect Dr. Max to care about the whole experience.",[517,1119,1120],{},"Every piece of the page should meet our standards of clarity and accessibility.",[589,1122,1123],{},[445,1124,593,1125,1127],{},[467,1126,596],{}," If a widget isn’t accessible or blocks content, question whether it's truly necessary. We carry responsibility for associated risks.",[445,1129,1130],{},[467,1131,1132],{},"Challenge example:",[445,1134,1135],{},[448,1136],{"alt":1137,"src":1138},"Desktop and mobile screenshots showing a dermatology consultation pop-up that opens automatically. The desktop view can be navigated by keyboard but not closed via keyboard. The mobile view shows small text and a large overlay that obscures most of the screen.","\u002Fimages\u002Fcontent-accessibility-third-party-widget.png",[445,1140,1141],{},[501,1142,1143],{},"Consultation widget that can’t be closed via keyboard on desktop and is too small and intrusive on mobile.",[589,1145,1146],{},[445,1147,593,1148,1150],{},[467,1149,596],{}," If an external tool is too confusing or difficult to use, flag it early – it’s part of caring for our customers.",[453,1152,1154],{"id":1153},"_04-understandable","04. Understandable",[445,1156,1157],{},"Make sure people can understand your content and how the service works.",[458,1159,1161],{"id":1160},"consistent-components-and-patterns","Consistent components and patterns",[445,1163,1164,1167],{},[467,1165,1166],{},"Make sure components used for the same function look and behave consistently across all pages."," Don’t swap out UI patterns (like category cards, buttons, or blocks) unless the function or context truly changes.",[445,1169,1170],{},[467,1171,1172],{},"To keep in mind:",[514,1174,1175,1182,1185,1188],{},[517,1176,1177,1178,1181],{},"✅ ",[467,1179,1180],{},"Use"," the same type of category cards across relevant pages – don’t alternate styles without reason.",[517,1183,1184],{},"Apply a consistent visual and functional treatment to elements like banners, tiles, or content blocks.",[517,1186,1187],{},"Maintain clear rules for spacing, alignment, and behaviours (what happens upon hover, tap, click…).",[517,1189,1190,1191,1194],{},"❌ ",[467,1192,1193],{},"Avoid"," subtle inconsistencies that break the user’s mental model of the interface.",[445,1196,1197],{},[467,1198,729],{},[514,1200,1201,1204],{},[517,1202,1203],{},"Predictable design allows users to navigate without re-learning patterns or guessing.",[517,1205,1206],{},"It’s especially important for users with memory limitations, cognitive load, or focus difficulties.",[589,1208,1209],{},[445,1210,593,1211,1213],{},[467,1212,596],{}," People rely on patterns – use the components consistently so you do not confuse them.",[458,1215,1217],{"id":1216},"language-and-cognitive-accessibility","Language and cognitive accessibility",[445,1219,1220],{},"To ensure content is truly accessible, go beyond visuals and measurable standards. Focus on how your language and sentence structure support clarity for everyone.",[445,1222,1223],{},[467,1224,1225],{},"Ask yourself:",[514,1227,1228,1231,1234],{},[517,1229,1230],{},"Is this content understandable at first glance?",[517,1232,1233],{},"Does it follow a logical order?",[517,1235,1236],{},"Is it inclusive for people with ADHD, dyslexia, or just fatigue?",[445,1238,1177,1239],{},[467,1240,1241],{},"Use:",[514,1243,1244,1247,1250],{},[517,1245,1246],{},"Clear vocabulary",[517,1248,1249],{},"Short, direct sentences",[517,1251,1252],{},"Logical flow of ideas",[445,1254,1190,1255],{},[467,1256,1257],{},"Avoid:",[514,1259,1260,1263,1266],{},[517,1261,1262],{},"Figurative language",[517,1264,1265],{},"Long-winded explanations",[517,1267,1268],{},"Dense blocks of text",[445,1270,1271,1272,1279,1280,488],{},"For more guidance, see ",[852,1273,1276],{"href":1274,"rel":1275},"https:\u002F\u002Fwww.bristol.ac.uk\u002Fstyle-guides\u002Fwriting\u002Finclusive\u002F",[861],[467,1277,1278],{},"Bristol Inclusive Writing"," or ",[852,1281,1284],{"href":1282,"rel":1283},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002Ftips\u002Fwriting\u002F",[861],[467,1285,1286],{},"W3C Writing Tips",[589,1288,1289],{},[445,1290,593,1291,1293],{},[467,1292,596],{}," Feel free to read your content aloud. If it sounds confusing, rephrase it.",[453,1295,1297],{"id":1296},"_05-robust","05. Robust",[445,1299,1300],{},"Make sure your content is build well enough to serve everyone – and every tool.",[458,1302,1304],{"id":1303},"built-well-from-the-inside","Built well from the inside",[445,1306,1307,1308,1311],{},"Assistive tools like screen readers rely on ",[467,1309,1310],{},"well-structured HTML",". If the code is messy – missing tags, repeated IDs, broken nesting – the content might disappear or become unreadable.",[445,1313,1314],{},[467,1315,1316],{},"How to do it:",[514,1318,1319,1322,1325,1328],{},[517,1320,1321],{},"Avoid duplicate ID attributes",[517,1323,1324],{},"Use proper opening and closing tags (such as \u003Cp> your text \u003C\u002Fp> .)",[517,1326,1327],{},"Don’t repeat attributes inside one element",[517,1329,1330],{},[852,1331,1334],{"href":1332,"rel":1333},"https:\u002F\u002Fvalidator.w3.org\u002F",[861],"Validate your HTML",[445,1336,1337],{},[467,1338,729],{},[514,1340,1341,1344],{},[517,1342,1343],{},"If the code is flawed, assistive tools may misread, ignore, or crash on your content.",[517,1345,1346],{},"Proper coding means no one is left behind.",[589,1348,1349],{},[445,1350,593,1351,1353],{},[467,1352,596],{}," If it’s broken in the code, it might be broken for someone’s assistive tools – even if you don’t see the problem.",[458,1355,1357],{"id":1356},"custom-components","Custom components",[445,1359,1360],{},"Custom HTML – if you have to use it – needs help to speak the language of accessibility. Such elements",[445,1362,1363,1364],{},"must come with ",[467,1365,1366],{},"names, roles, states, and values.",[445,1368,1369],{},[467,1370,1316],{},[514,1372,1373,1376,1379,1382],{},[517,1374,1375],{},"Use semantic HTML when possible – screen readers handle it best",[517,1377,1378],{},"Always label form fields – never rely on placeholder text",[517,1380,1381],{},"Use ARIA attributes where needed ( role , aria-label , aria-checked , etc.)",[517,1383,1384],{},"When using iframes, label each \u003Ciframe> with a clear \u003Ctitle>",[445,1386,1387],{},[467,1388,729],{},[445,1390,1391],{},"Without this, a user may not even know your feature exists – let alone interact with it.",[589,1393,1394],{},[445,1395,593,1396,1398],{},[467,1397,596],{}," If you’re building something custom, take a moment to explain what it is – clearly, consistently, and within the code itself.",[453,1400,1402],{"id":1401},"_06-summary","06. Summary",[458,1404,1406],{"id":1405},"follow-the-key-principles-to-show-care","Follow the key principles to show care",[445,1408,1177,1409],{},[467,1410,1411],{},"Make it Perceivable",[514,1413,1414,1417,1420],{},[517,1415,1416],{},"Ensure all users can see or hear the information.",[517,1418,1419],{},"Provide alt texts, clear structures, and readable fonts.",[517,1421,1422],{},"Think beyond visuals: every important message must be accessible through text or assistive technology.",[445,1424,1177,1425],{},[467,1426,1427],{},"Make it Operable",[514,1429,1430,1433],{},[517,1431,1432],{},"Build content and features that users can navigate easily – with keyboards, screen readers, or other tools.",[517,1434,1435],{},"Ensure links, buttons, and external tools are clear, consistent, and mobile-friendly.",[445,1437,1177,1438],{},[467,1439,1440],{},"Make it Understandable",[514,1442,1443],{},[517,1444,1445],{},"Structure text logically, label links meaningfully, and keep interactions predictable.",[445,1447,1177,1448],{},[467,1449,1450],{},"Make it Robust",[514,1452,1453],{},[517,1454,1455],{},"Ensure your content is coded well enough to serve all technologies.",[445,1457,1177,1458],{},[467,1459,729],{},[514,1461,1462],{},[517,1463,1464,1465],{},"Accessibility is not just a technical requirement – ",[467,1466,1467],{},"it help us show our care both to people with disabilities, as well as to ease the path to our product for anyone else.",[453,1469,1471],{"id":1470},"further-reading","Further reading",[514,1473,1474,1480],{},[517,1475,1476,1479],{},[852,1477,1478],{"href":431},"Accessibility at  Dr. Max"," — How we approach accessibility",[517,1481,1482,1484],{},[852,1483,417],{"href":418}," — Stay on-brand with colours from Dr. Max palette",{"title":1486,"searchDepth":1487,"depth":1488,"links":1489},"",1,2,[1490,1495,1506,1513,1517,1521,1524],{"id":455,"depth":1488,"text":456,"children":1491},[1492,1494],{"id":460,"depth":1493,"text":408},3,{"id":506,"depth":1493,"text":507},{"id":542,"depth":1488,"text":543,"children":1496},[1497,1498,1499,1500,1501,1502,1503,1504,1505],{"id":549,"depth":1493,"text":550},{"id":600,"depth":1493,"text":601},{"id":620,"depth":1493,"text":621},{"id":633,"depth":1493,"text":634},{"id":646,"depth":1493,"text":647},{"id":694,"depth":1493,"text":695},{"id":747,"depth":1493,"text":748},{"id":787,"depth":1493,"text":788},{"id":872,"depth":1493,"text":873},{"id":935,"depth":1488,"text":936,"children":1507},[1508,1509,1510,1511,1512],{"id":942,"depth":1493,"text":943},{"id":989,"depth":1493,"text":990},{"id":1026,"depth":1493,"text":621},{"id":1038,"depth":1493,"text":634},{"id":1057,"depth":1493,"text":1058},{"id":1153,"depth":1488,"text":1154,"children":1514},[1515,1516],{"id":1160,"depth":1493,"text":1161},{"id":1216,"depth":1493,"text":1217},{"id":1296,"depth":1488,"text":1297,"children":1518},[1519,1520],{"id":1303,"depth":1493,"text":1304},{"id":1356,"depth":1493,"text":1357},{"id":1401,"depth":1488,"text":1402,"children":1522},[1523],{"id":1405,"depth":1493,"text":1406},{"id":1470,"depth":1488,"text":1471},"Make sure that every element we create is accessible to all","md",null,{},true,{"title":408,"description":1525},"kSzdUWukeey8YlfKSOdDxeM_AoWXyFJKZ-jE6vmjITI",1793289676894]