Creating a more accessible Drupal website

Parent Feed:

2 Page and site navigation

Success Criterion 1.3.3 Sensory Characteristics
When instructions are given on your Drupal website they can’t be dependent on sensory characteristics of components such as shape, colour, size, visual location, orientation, or sound.

So for example you can’t just use an icon, such as a checkmark, to indicate something was done successful. It needs to be accompanied by a text description like ‘Your submission was sent’.

On my Drupal website I don’t give any instructions of this nature.

Success Criterion 1.3.4 Orientation
This criteria states that you can’t lock your site to a specific orientation such as landscape or portrait.

My Drupal site is fully responsive and viewable in any orientation.

Success Criterion 2.4.2 Page Titled
Every page needs a title (the

HTML element) that describes the purpose of the page.</p> <p>On my Drupal website I use the <a href="<a href="https://www.drupal.org/project/metatag">https://www.drupal.org/project/metatag</a>">Metatag module</a> to generate the <title> tag. This tag is generated by using the title of the node and combining the name of my site such as:</p> <p><em>50 Drupal modules every Drupal professional should know about | Robert Roose: Drupal designer</em></p> <p>Every node on my Drupal website has a very descriptive title of what the page is about which is used in the <title> tag. </p> <p><a href="<a href="https://www.w3.org/TR/WCAG21/#headings-and-labels">https://www.w3.org/TR/WCAG21/#headings-and-labels</a>">Success Criterion 2.4.6 Headings and Labels</a><br /> Just like the title of the page all the headings and labels used on your website should be clear and describe the element it concerns.</p> <p>As I try to write very concise and clear content I think I got this covered. All my headings and labels have the intent to be descriptive of the content it concerns.</p> <p><a href="<a href="https://www.w3.org/TR/WCAG21/#consistent-navigation">https://www.w3.org/TR/WCAG21/#consistent-navigation</a>">Success Criterion 3.2.3 Consistent Navigation</a><br /> Navigation elements (such as the main menu or search) should be in the same relative order and consistent through all pages.</p> <p>On my Drupal website I have two navigation elements, the footer menu which is always positioned on the bottom of the website and a main menu. This main menu will become sticky when a user scrolls down, so it’s always visible in the same position. The main menu becomes a hamburger menu tucked on the left side when the viewport becomes too small to display the full menu. This might be an issue because the functionality and position of the menu changes. But as this is a common design pattern I believe this won’t be rejected.</p> <p><a href="<a href="https://www.w3.org/TR/WCAG21/#consistent-identification">https://www.w3.org/TR/WCAG21/#consistent-identification</a>">Success Criterion 3.2.4 Consistent Identification</a><br /> Throughout your Drupal website components need to be consistently identified. So for example if you have a block with the latest articles on your homepage you have to use the same title for your block as for an overview page with all your articles. </p> <p>As Drupal is modular reusing block and functionality it’s pretty safe to say all components are consistently identified.</p> </div> </div> </div> <div class="paragraph__width paragraph__width--small paragraph paragraph--type--newsletter paragraph--view-mode--default paragraph--id--63"> <div class="paragraph__content"> <div class="clearfix text-formatted field field--name-field-pg-text field--type-text-long field--label-hidden field__item"><h2>Subscribe to my Drupal Newsletter</h2> <p>And receive updates about new Drupal posts (and more) directly in your inbox!</p> </div> <div class="field field--name-field-pg-form field--type-webform field--label-hidden field__item"><span id="webform-submission-drupal-newsletter-paragraph-63-form-ajax-content"></span><div id="webform-submission-drupal-newsletter-paragraph-63-form-ajax" class="webform-ajax-form-wrapper" data-effect="fade" data-progress-type="throbber"><form class="webform-submission-form webform-submission-add-form webform-submission-drupal-newsletter-form webform-submission-drupal-newsletter-add-form webform-submission-drupal-newsletter-paragraph-63-form webform-submission-drupal-newsletter-paragraph-63-add-form js-webform-details-toggle webform-details-toggle" data-drupal-selector="webform-submission-drupal-newsletter-paragraph-63-add-form" action="/blog/drupal/creating-more-accessible-drupal-website" method="post" id="webform-submission-drupal-newsletter-paragraph-63-add-form" accept-charset="UTF-8"> <fieldset class="form js-webform-type-fieldset webform-type-fieldset js-form-item form-item js-form-wrapper form-wrapper" data-drupal-selector="edit-form" id="edit-form"> <legend> <span class="visually-hidden fieldset-legend">Form</span> </legend> <div class="fieldset-wrapper"> <div class="js-form-item form-item js-form-type-email form-type-email js-form-item-e-mail form-item-e-mail"> <label for="edit-e-mail" class="js-form-required form-required">E-mail</label> <input data-webform-required-error="You forgot to fill in your e-mail." data-drupal-selector="edit-e-mail" type="email" id="edit-e-mail" name="e_mail" value="" size="60" maxlength="254" class="form-email required" required="required" aria-required="true" /> </div> <div data-drupal-selector="edit-actions" class="form-actions webform-actions js-form-wrapper form-wrapper" id="edit-actions"><input class="webform-button--submit newsletter-subscribe button button--primary js-form-submit form-submit" data-drupal-selector="edit-actions-submit" data-disable-refocus="true" type="submit" id="edit-actions-submit" name="op" value="Subscribe" /> </div> </div> </fieldset> <input autocomplete="off" data-drupal-selector="form-oxmyffubgxivgjl5vcjsf7yehysja1abyidwlabxdxe" type="hidden" name="form_build_id" value="form-oXmYFfUbgXIvgJl5VcJsf7YehysJa1AByIdWlAbXdxE" /> <input data-drupal-selector="edit-webform-submission-drupal-newsletter-paragraph-63-add-form" type="hidden" name="form_id" value="webform_submission_drupal_newsletter_paragraph_63_add_form" /> </form> </div></div> </div> </div> <div class="paragraph paragraph--type--text paragraph--view-mode--default paragraph--id--64"> <div class="paragraph__content"> <div class="clearfix text-formatted field field--name-field-pg-text field--type-text-long field--label-hidden field__item"><h2>3 Colour and text</h2> <p><a href="<a href="https://www.w3.org/TR/WCAG21/#use-of-color">https://www.w3.org/TR/WCAG21/#use-of-color</a>">Success Criterion 1.4.1 Use of Colour</a><br /> Colour cannot be the only visual indicator to inform a user, indicate an action or ask for a reaction. Such as only using a color to indicate an input field which is not filled in correctly.</p> <p>Here is where my website is currently failing. I only used a colour to indicate a link or active menu state. As the contrast isn’t sufficient I added a border (underline) to all the links in the main content. Also I’ve added a line to indicate the active menu item.</p> <p><a href="<a href="https://www.w3.org/TR/WCAG21/#contrast-minimum">https://www.w3.org/TR/WCAG21/#contrast-minimum</a>">Success Criterion 1.4.3 Contrast (Minimum)</a><br /> Text (and images of text) has to have a contrast ratio of 4,5:1 and large text a contrast ratio of 3:1.</p> <p>For the main text on my website is used #888888 (gray) on a #222222 (near black) background. When I check these values with the <a href="<a href="https://webaim.org/resources/contrastchecker/">https://webaim.org/resources/contrastchecker/</a>">WebAIM contrast checker</a> it results in a contrast ratio of 4,48:1 just failing the criteria. So I’ve changed the #888888 to #999999 which does pass the test. </p> <p><a href="<a href="https://www.w3.org/TR/WCAG21/#resize-text">https://www.w3.org/TR/WCAG21/#resize-text</a>">Success Criterion 1.4.4 Resize text</a><br /> Users should be able to resize the text on your Drupal website without loss of content or functionality.</p> <p>Because my Drupal website is fully responsive this isn’t any problem. Blowing up the size of the text to 200% doesn’t break the content or functionality.</p> <p><a href="<a href="https://www.w3.org/TR/WCAG21/#images-of-text">https://www.w3.org/TR/WCAG21/#images-of-text</a>">Success Criterion 1.4.5 Images of Text</a><br /> Basically this says you shouldn’t use text as an image. Because of modern CSS techniques there is no excuse anymore to display text as an image, which is why this criteria doesn’t concern most up to date websites, like mine.</p> <p><a href="<a href="https://www.w3.org/TR/WCAG21/#reflow">https://www.w3.org/TR/WCAG21/#reflow</a>">Success Criterion 1.4.10 Reflow</a><br /> Content and functionality should not break if the website is viewed in a viewport of 320 pixels wide and 256 pixels high. As mentioned above my Drupal website is fully responsive so this won’t be an issue.</p> <p><a href="<a href="https://www.w3.org/TR/WCAG21/#non-text-contrast">https://www.w3.org/TR/WCAG21/#non-text-contrast</a>">Success Criterion 1.4.11 Non-text Contrast</a><br /> User interface components (to control the website such as links) and graphical objects (to understand the website such as graphs or diagrams) need a 3:1 contrast.</p> <p>I’ve checked all elements on contrast ratio and they pass the 3:1 requirement.</p> <p><a href="<a href="https://www.w3.org/TR/WCAG21/#text-spacing">https://www.w3.org/TR/WCAG21/#text-spacing</a>">Success Criterion 1.4.12 Text Spacing</a><br /> It needs to be possible to change the text with an external tool to the following settings:</p> <ul> <li>Line height (line spacing) to at least 1.5 times the font size;</li> <li>Spacing following paragraphs to at least 2 times the font size;</li> <li>Letter spacing (tracking) to at least 0.12 times the font size;</li> <li>Word spacing to at least 0.16 times the font size.</li> </ul> <p>All content should still be visible using these style settings.</p> <p>To test this you can use the <a href="<a href="https://add0n.com/stylus.html">https://add0n.com/stylus.html</a>">Stylus browser plugin</a>. This plugin enables you to inject CSS code on any website. Create a new style and use the following CSS code:</p> <p><code>* {<br /> line-height: 1.5 !important;<br /> letter-spacing: 0.12em !important;<br /> word-spacing: 0.16em !important;<br /> }</p><p>p {<br /> margin-bottom: 2em !important;</code></p> <p>If I visit my website, with the CSS styles as an override, nothing breaks so this should be fine.</p> </div> </div> </div> <div class="paragraph paragraph--type--text paragraph--view-mode--default paragraph--id--65"> <div class="paragraph__content"> <div class="clearfix text-formatted field field--name-field-pg-text field--type-text-long field--label-hidden field__item"><h2>4 Basic code analysis</h2> <p><a href="<a href="https://www.w3.org/TR/WCAG21/#bypass-blocks">https://www.w3.org/TR/WCAG21/#bypass-blocks</a>">Success Criterion 2.4.1 Bypass Blocks</a><br /> You need to have a way to bypass blocks and directly navigate to the main content.</p> <p>Out of the box Drupal provides a skip link. If you press tab viewing your Drupal website a skip link should appear. My Drupal website also has this skip link, but it wasn’t styled yet, showing as a blue link on a dark background. I’ve changed the styling of my skip link so it’s better visible.</p> <p><a href="<a href="https://www.w3.org/TR/WCAG21/#language-of-page">https://www.w3.org/TR/WCAG21/#language-of-page</a>">Success Criterion 3.1.1 Language of Page</a><br /> The language of the page has to be set correctly. This can be done by giving your HTML tag a lang attribute containing the language code of the language that is used on the page. </p> <p>Drupal sets this automatically so this should not be a problem. Even if your <a href="<a href="https://robertroose.com/blog/drupal/tips-setting-your-multilingual-drupal-website">https://robertroose.com/blog/drupal/tips-setting-your-multilingual-drupa...</a>">website is multilingual</a> and you correctly use Drupal's built in functionality this should be no issue.</p> <p>Checking the HTML tag of this website I see it correctly displays the <em>lang = “en”</em> attribute. Also, when I check the Dutch version of my website it displays the <em>lang = “nl”</em> attribute.</p> <p><a href="<a href="https://www.w3.org/TR/WCAG21/#language-of-parts">https://www.w3.org/TR/WCAG21/#language-of-parts</a>">Success Criterion 3.1.2 Language of Parts</a><br /> In some cases it’s possible to have a quote in a different language on your website. If so you need to identify this HTML part correctly by adding the lang attribute.</p> <p>As my website is completely in English there is no action needed on my part to correct this.</p> <p><a href="<a href="https://www.w3.org/TR/WCAG21/#parsing">https://www.w3.org/TR/WCAG21/#parsing</a>">Success Criterion 4.1.1 Parsing</a><br /> Incorrect HTML (such as tags that are opened but not closed) can cause issues when viewing a website with a screen reader.</p> <p>I’ve checked my website with the <a href="<a href="https://validator.w3.org/">https://validator.w3.org/</a>">W3C validator</a>. I’m getting some warnings but no errors, which basically means I’ve got no faulty or incorrect code.</p> </div> </div> </div> <div class="paragraph paragraph--type--text paragraph--view-mode--default paragraph--id--66"> <div class="paragraph__content"> <div class="clearfix text-formatted field field--name-field-pg-text field--type-text-long field--label-hidden field__item"><h2>Conclusion</h2> <p>As you can see Drupal is pretty accessible out of the box. Most issues were caused by my custom theme. but we’re easily fixed. Hopefully this blog inspired you to look into the accessibility of your website as well.</p> <p>If you have any additional tips or questions, please let me know by leaving a <a href="#comments">comment</a>. Also don’t forget to subscribe to my <a href="<a href="https://robertroose.com/drupal-newsletter">https://robertroose.com/drupal-newsletter</a>">Drupal newsletter</a>!</p> </div> </div> </div> <div class="paragraph__style paragraph__style--small-header paragraph paragraph--type--block paragraph--view-mode--default paragraph--id--67"> <div class="paragraph__content"> <div class="field field--name-field-pg-block field--type-block-field field--label-hidden field__item"><div class="views-element-container block block-views block-views-blockblog-block-2" id="block-views-block-blog-block-2"> <h2>More blog posts about Drupal</h2> <div><div class="articles related view view-blog view-id-blog view-display-id-block_2 js-view-dom-id-1d30b500fb43247f41a707fda78ce4bbd0cf4b5a3a56a4130476dfec35d81c9b"> <div class="view-content"> <div class="views-row-link views-row"><div class="views-field views-field-title"><h2 class="field-content"><a href="<a href="https://robertroose.com/blog/drupal/drupal-theming-tips-web-designers-starting-drupal">https://robertroose.com/blog/drupal/drupal-theming-tips-web-designers-st...</a>" hreflang="en">Drupal theming tips for web designers starting with Drupal</a></h2></div><div class="views-field views-field-field-node-summary"><div class="field-content">With this blogpost I, Drupal web designer for 10+ years, will show you how I theme my Drupal websites. How does it work, what is my set up and what do you need to be aware of. </div></div><span class="views-field views-field-published-at"><span class="views-label views-label-published-at">Published</span><span class="date">29 September 2021</span><span class="arrow"></span></span><div class="views-field views-field-field-node-image"><div class="field-content"> <img src="<a href="https://robertroose.com/sites/default/files/styles/thumbnail/public/images/woman-working-on-a-computer.jpg?h=3936688c&itok=fvcz7sNc">https://robertroose.com/sites/default/files/styles/thumbnail/public/imag...</a>" width="450" height="300" alt="Woman working on a computer" loading="lazy" typeof="foaf:Image" class="image-style-thumbnail" /> </div></div></div> <div class="views-row-link views-row"><div class="views-field views-field-title"><h2 class="field-content"><a href="<a href="https://robertroose.com/blog/drupal/tips-setting-your-multilingual-drupal-website">https://robertroose.com/blog/drupal/tips-setting-your-multilingual-drupa...</a>" hreflang="en">Tips for setting up your multilingual Drupal website</a></h2></div><div class="views-field views-field-field-node-summary"><div class="field-content">As of Drupal version 8 multilingual support is baked in. Still, it can be frustrating to let Drupal play nice with more than one language. In this blog I’ll help you with some annoying quirks. </div></div><span class="views-field views-field-published-at"><span class="views-label views-label-published-at">Published</span><span class="date">5 August 2021</span><span class="arrow"></span></span><div class="views-field views-field-field-node-image"><div class="field-content"> <img src="<a href="https://robertroose.com/sites/default/files/styles/thumbnail/public/images/eiffel-tower-with-international-flags.jpg?h=e96b0db1&itok=zC-Fzejt">https://robertroose.com/sites/default/files/styles/thumbnail/public/imag...</a>" width="450" height="300" alt="Flags of the UN in front of the Eifel tower" loading="lazy" typeof="foaf:Image" class="image-style-thumbnail" /> </div></div></div> <div class="views-row-link views-row"><div class="views-field views-field-title"><h2 class="field-content"><a href="<a href="https://robertroose.com/blog/drupal/how-design-and-build-sustainable-climate-friendly-drupal-website">https://robertroose.com/blog/drupal/how-design-and-build-sustainable-cli...</a>" hreflang="en">How to design and build a sustainable climate friendly Drupal website</a></h2></div><div class="views-field views-field-field-node-summary"><div class="field-content">In this blogpost I will share how you can design and build an eco friendly Drupal website. </div></div><span class="views-field views-field-published-at"><span class="views-label views-label-published-at">Published</span><span class="date">16 July 2021</span><span class="arrow"></span></span><div class="views-field views-field-field-node-image"><div class="field-content"> <img src="<a href="https://robertroose.com/sites/default/files/styles/thumbnail/public/images/row-of-trees.jpg?h=e8b8fce5&itok=iUxpWY6s">https://robertroose.com/sites/default/files/styles/thumbnail/public/imag...</a>" width="450" height="300" alt="A row of trees" loading="lazy" typeof="foaf:Image" class="image-style-thumbnail" /> </div></div></div> </div> </div> </div> </div> </div> </div> </div> </div> <section id="node-article-field-node-comments" class="field field--name-field-node-comments field--type-comment field--label-above comment-wrapper"> <a name="comments" class="jump-to-comments"></a> <form class="comment-default-comments-form comment-form ajax-comments-reply-form-node-19-field_node_comments-0-0 ajax-comments-form-add" data-user-info-from-browser id="ajax-comments-reply-form-node-19-field-node-comments-0-0" data-drupal-selector="comment-form" action="<a href="https://robertroose.com/comment/reply/node/19/field_node_comments">https://robertroose.com/comment/reply/node/19/field_node_comments</a>" method="post" accept-charset="UTF-8"> <div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-name form-item-name"> <label for="edit-name">Your name</label> <input data-drupal-default-value="Anonymous" data-drupal-selector="edit-name" type="text" id="edit-name" name="name" value="" size="30" maxlength="60" class="form-text" /> </div> <div class="js-form-item form-item js-form-type-email form-type-email js-form-item-mail form-item-mail"> <label for="edit-mail">Email</label> <input data-drupal-selector="edit-mail" aria-describedby="edit-mail--description" type="email" id="edit-mail" name="mail" value="" size="30" maxlength="64" class="form-email" /> <div id="edit-mail--description" class="description"> The content of this field is kept private and will not be shown publicly. </div> </div> <div class="js-form-item form-item js-form-type-url form-type-url js-form-item-homepage form-item-homepage"> <label for="edit-homepage">Homepage</label> <input data-drupal-selector="edit-homepage" type="url" id="edit-homepage" name="homepage" value="" size="30" maxlength="255" class="form-url" /> </div> <input data-drupal-selector="edit-form-html-id" type="hidden" name="form_html_id" value="ajax-comments-reply-form-node-19-field-node-comments-0-0" /> <input data-drupal-selector="edit-wrapper-html-id" type="hidden" name="wrapper_html_id" value="node-article-field-node-comments" /> <input autocomplete="off" data-drupal-selector="form-omaz4o9lpd4o3ghqu1tkf4mijbg2pedigvfarsub-w4" type="hidden" name="form_build_id" value="form-omaz4o9Lpd4O3ghqU1tkF4MIJBG2pEdIGVFARsub-w4" /> <input data-drupal-selector="edit-comment-default-comments-form" type="hidden" name="form_id" value="comment_default_comments_form" /> <div class="field--type-text-long field--name-comment-body field--widget-text-textarea js-form-wrapper form-wrapper" data-drupal-selector="edit-comment-body-wrapper" id="edit-comment-body-wrapper"> <div class="js-text-format-wrapper text-format-wrapper js-form-item form-item"> <div class="js-form-item form-item js-form-type-textarea form-type-textarea js-form-item-comment-body-0-value form-item-comment-body-0-value"> <label for="edit-comment-body-0-value" class="js-form-required form-required">Comment</label> <div class="form-textarea-wrapper"> <textarea class="js-text-full text-full form-textarea required resize-vertical" data-media-embed-host-entity-langcode="en" data-drupal-selector="edit-comment-body-0-value" id="edit-comment-body-0-value" name="comment_body[0][value]" rows="5" cols="60" placeholder="" required="required" aria-required="true"></textarea> </div> </div> <div class="js-filter-wrapper filter-wrapper js-form-wrapper form-wrapper" data-drupal-selector="edit-comment-body-0-format" id="edit-comment-body-0-format"><div class="filter-help js-form-wrapper form-wrapper" data-drupal-selector="edit-comment-body-0-format-help" id="edit-comment-body-0-format-help"><a href="<a href="https://robertroose.com/filter/tips">https://robertroose.com/filter/tips</a>" target="_blank" data-drupal-selector="edit-comment-body-0-format-help-about" id="edit-comment-body-0-format-help-about">About text formats</a></div> <div class="js-filter-guidelines filter-guidelines js-form-wrapper form-wrapper" data-drupal-selector="edit-comment-body-0-format-guidelines" id="edit-comment-body-0-format-guidelines"><div data-drupal-format-id="restricted_html" class="filter-guidelines-item filter-guidelines-restricted_html"> <h4 class="label">Restricted HTML</h4> <ul class="tips"> <li>Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id></li> <li>Lines and paragraphs break automatically.</li> <li>Web page addresses and email addresses turn into links automatically.</li> </ul> </div> </div> </div> </div> </div> <div class="js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-notify form-item-notify"> <input data-drupal-selector="edit-notify" type="checkbox" id="edit-notify" name="notify" value="1" checked="checked" class="form-checkbox" /> <label for="edit-notify" class="option">Send me an email when I get a reply</label> </div> <input data-drupal-selector="edit-notify-type" type="hidden" name="notify_type" value="2" /> <div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions--3"><input data-drupal-selector="edit-ajax-comments-reply-form-node-19-field-node-comments-0-0" type="submit" id="edit-ajax-comments-reply-form-node-19-field-node-comments-0-0" name="op" value="Save" class="button button--primary js-form-submit form-submit" /> </div> </form> </section> </div> </article> </div> </div> </div> </main> <footer role="contentinfo" class="footer"> <div class="region region-footer"> <nav role="navigation" aria-labelledby="block-molyneux-bottommenu-menu" id="block-molyneux-bottommenu" class="settings-tray-editable block block-menu navigation menu--bottom-menu" data-drupal-settingstray="editable"> <h2 class="visually-hidden" id="block-molyneux-bottommenu-menu">Bottom menu</h2> <ul class="menu"> <li class="menu-item"> <a href="<a href="https://robertroose.com/privacy-statement">https://robertroose.com/privacy-statement</a>" data-drupal-link-system-path="node/33">Privacy statement</a> </li> </ul> </nav> </div> </footer> </div> </div> <div class="off-canvas-wrapper"><div id="off-canvas"> <ul> <li class="menu-item--_e2f866f-d786-4a7d-801f-00453e05c22a"> <a href="<a href="https://robertroose.com/">https://robertroose.com/</a>" data-drupal-link-system-path="<front>">Blog</a> </li> <li class="menu-item--_899de69-78bb-4217-b68e-6b34bc834ba8"> <a href="<a href="https://robertroose.com/about-me">https://robertroose.com/about-me</a>" data-drupal-link-system-path="node/11">About me</a> </li> <li class="menu-item--_84fc7c1-7f1e-4555-ae58-0f7c8738ebde"> <a href="<a href="https://robertroose.com/drupal-newsletter">https://robertroose.com/drupal-newsletter</a>" data-drupal-link-system-path="node/12">Newsletter</a> </li> <li class="menu-item--_916d83a-dd40-4e8d-8052-c74bde5729e7"> <a href="<a href="https://robertroose.com/contact">https://robertroose.com/contact</a>" data-drupal-link-system-path="node/6">Contact</a> </li> </ul> </div></div> <script type="application/json" data-drupal-selector="drupal-settings-json">{"path":{"baseUrl":"\/","scriptPath":null,"pathPrefix":"","currentPath":"node\/19","currentPathIsAdmin":false,"isFront":false,"currentLanguage":"en"},"pluralDelimiter":"\u0003","suppressDeprecationErrors":true,"ajaxPageState":{"libraries":"ajax_comments\/commands,asset_injector\/js\/matomo_tags_container,asset_injector\/js\/robertroose_com_matomo_tracking_code,classy\/base,classy\/messages,classy\/node,cleantalk\/apbct-public,comment_notify\/comment_notify,core\/jquery.form,core\/normalize,extlink\/drupal.extlink,filter\/drupal.filter,lazy\/lazy,molyneux\/global-scripts,molyneux\/global-styling,paragraphs\/drupal.paragraphs.unpublished,responsive_menu\/responsive_menu.breakpoint,responsive_menu\/responsive_menu.config,responsive_menu\/responsive_menu.styling,system\/base,views\/views.module,webform\/webform.ajax,webform\/webform.element.details.save,webform\/webform.element.details.toggle,webform\/webform.element.message,webform\/webform.form,webform\/webform.theme.classy","theme":"molyneux","theme_token":null},"ajaxTrustedUrl":{"form_action_p_pvdeGsVG5zNF_XLGPTvYSKCf43t8qZYSwcfZl2uzM":true,"https:\/\/robertroose.com\/blog\/drupal\/creating-more-accessible-drupal-website?ajax_form=1":true,"https:\/\/robertroose.com\/comment\/reply\/node\/19\/field_node_comments":true,"https:\/\/robertroose.com\/ajax_comments\/add\/node\/19\/field_node_comments":true},"responsive_menu":{"position":"left","theme":"theme-dark","pagedim":"pagedim","modifyViewport":true,"use_bootstrap":false,"breakpoint":"all and (min-width: 940px)","drag":false,"mediaQuery":"all and (min-width: 940px)"},"lazy":{"lazysizes":{"lazyClass":"lazyload","loadedClass":"lazyloaded","loadingClass":"lazyloading","preloadClass":"lazypreload","errorClass":"lazyerror","autosizesClass":"lazyautosizes","srcAttr":"data-src","srcsetAttr":"data-srcset","sizesAttr":"data-sizes","minSize":40,"customMedia":[],"init":true,"expFactor":1.5,"hFac":0.8,"loadMode":2,"loadHidden":true,"ricTimeout":0,"throttleDelay":125,"plugins":[]},"placeholderSrc":"","preferNative":false,"minified":true,"libraryPath":"\/libraries\/lazysizes"},"data":{"extlink":{"extTarget":true,"extTargetNoOverride":false,"extNofollow":false,"extNoreferrer":true,"extFollowNoOverride":false,"extClass":"0","extLabel":"(link is external)","extImgClass":false,"extSubdomains":true,"extExclude":"","extInclude":"","extCssExclude":"","extCssExplicit":"","extAlert":false,"extAlertText":"This link will take you to an external web site. We are not responsible for their content.","mailtoClass":"0","mailtoLabel":"(link sends email)","extUseFontAwesome":false,"extIconPlacement":"append","extFaLinkClasses":"fa fa-external-link","extFaMailtoClasses":"fa fa-envelope-o","whitelistedDomains":[]}},"ajax":{"edit-actions-submit":{"callback":"::submitAjaxForm","event":"click","effect":"fade","speed":500,"progress":{"type":"throbber","message":""},"disable-refocus":true,"url":"https:\/\/robertroose.com\/blog\/drupal\/creating-more-accessible-drupal-website?ajax_form=1","dialogType":"ajax","submit":{"_triggering_element_name":"op","_triggering_element_value":"Subscribe"}},"edit-ajax-comments-reply-form-node-19-field-node-comments-0-0":{"url":"https:\/\/robertroose.com\/ajax_comments\/add\/node\/19\/field_node_comments","wrapper":"node-article-field-node-comments","method":"replaceWith","effect":"fade","event":"mousedown","keypress":true,"prevent":"click","dialogType":"ajax","submit":{"_triggering_element_name":"op","_triggering_element_value":"Save"}}},"user":{"uid":0,"permissionsHash":"3a4bd2b3a4f0d7179d99ef0072b1e0bba0daefd71f2813d42bee801899097aa8"}}</script> <script src="<a href="https://robertroose.com/sites/default/files/js/js_LL6l3ucLTehAUtOypb1zeygzWJdHYSw3L8ti6te7kwc.js">https://robertroose.com/sites/default/files/js/js_LL6l3ucLTehAUtOypb1zey...</a>"></script> </body> </html>

Original Post:

https://robertroose.com/blog/drupal/creating-more-accessible-drupal-website

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
Facet based on tags, author, or feed
Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web