Headings and labels describe topic or purpose.
Testing & RemediationHow to test: Open up your website and begin evaluating each page for text acting as headings and labels. Analyze each heading or label text to see if the text is sufficiently descriptive of the topic or purpose of what it is referring to. How to remediate: Update your label and heading text so that it accurately describes its purpose.
Questions and Answers
Not necessarily, but there are a few things that you need to make sure of:
- The page should be using the proper semantic elements. This means things like header, nav, aside, etc.
- All headings and page content should flow in a logical order. H1 > H2> etc.
- Without styling, elements should still be in the order they are intended to be read or listened to.
Nearly all elements can be given focus, and have their focus order changed using the 'tabindex' attribute. Elements on a page will be given focus in the order of their tab index. W3 Schools has a great explanation of tabindex here.
To navigate a website with the keyboard, you can start by hitting the tab key. You should see an indicator on the element that has focus. If it is a link, you can hit enter to go to it. While going forward through the tab keys is done with tab, going backwards can be done by hitting the shift key in addition to the tab key. When it comes to various input elements (radio buttons, select boxes), the arrow keys can be used on them once the element has focus.
There are many form specific elements that can be used to describe what's going on. As you've already mentioned, each input requires that it has a corresponding label. If you would like to further organize and give meaning to your form, you can use the 'fieldset' element to group related inputs. Within each fieldset, you can create a 'legend' that describes the inputs. For instance, let's say we have a form that asks a user for their personal information, and details about an order. The source code could look something like this.
<form> <fieldset> <legend>Enter Your Information</legend> <label for="first">First Name</label> <input type="text" name="first"> <!-- etc --> </fieldset> <fieldset> <legend>Order Details</legend> <label for="size">Size</label> <select name="size"> <!-- sizes --> </select> <!-- etc. --> </fieldset> </form>
This question depends on a number of factors including size of site, desired level of conformance, your developer's understanding of accessibility techniques, etc. Accessible Web is here to help. Reach out and we can discuss your site specifically.