Components that have the same functionality within a set of Web pages are identified consistently.
Testing & RemediationHow to test: Open your website in your browser of choice. Begin examining components with a visible text label to confirm that they are identified consistently each time they appear on the site. If you have any components that are considered non-text content, make sure the alternative text is the same each time that component is used. Also confirm that all repeating elements have the same accessible name. How to remediate: Use labels, names and text alternatives consistently for content that has the same functionality.
Questions and Answers
Unfortunately, a large majority of sites on the internet do not meet the web accessibility guidelines. This means it would be very hard to link to external sites if this was the case. Because of this reason you are allowed to link to external content and maintain your certification so long as your entire site passes the accessibility guidelines.
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.
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>
Carousels and sliders pose accessibility issues for keyboard and screen reader users that can be challenging to adequately address by adjusting your markup. Keep in mind that all content and controls abled users can access must be made robust enough to be accessed by all users, this means (among other things) that slider controls need to have tab-navigation consideration, timing needs to be adequate enough so that all users can read slides, and UI controls need to have enough color contrast such that they can be perceived by everyone. Any carousel or slider can contain non-accessible content, so keep these things in mind when building content:
- Do the headers flow from h1 down without skipping a level?
- Do embedded images have adequate alt tags?
- Do the links open have descriptive titles or link text?
- Snazzy Slider by Josh Cummings - https://www.joshcummingsdesign.com/snazzy-slider
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.