Important note: This Wiki page is edited by participants of the EOWG. It does not necessarily represent consensus and it may have incorrect information or information that is not supported by other Working Group participants, WAI, or W3C. It may also have some very useful information.


Front-End Developer Responsibilities Mapping

From Education & Outreach
Jump to: navigation, search

Parent document: https://www.w3.org/WAI/EO/wiki/ARRM_Project_-_Accessibility_Roles_and_Responsibilities_Mapping

Front-End Developer

Front end development typically builds the parts of a product that will be interacted with by the user - specifically, the user interface. For the purpose of this resource, front end development refers to the implementation or codification of the design in functional templates for a product using technologies such as HTML, CSS and JavaScript.

Key Deliverables

  • HTML and CSS files
  • Client-side scripting
  • JavaScript libraries and frameworks
  • Etc.

Tasks include

  • Pattern libraries and prototypes
  • Template functionalities
  • Semantically-rich HTML document structures and widgets
  • Use and adapt frameworks and content management systems
  • Etc.

Example job titles for this role

Front End Developer, Web Developer, Full-Stack Developer, UI/UX Developer, JavaScript Developer, UI/UX Engineer

Front-End Development and Accessibility User Stories

Checkpoint:

NAV-026: Focus is not unexpectedly shifted without preliminary user input.

Role Assignment Scenario

Interactive elements are selected organized on the page by the UX designer. The final presentation is defined by the visual designer. Any associated text will be provided by the content author. With this information the front-end developer can implement the operation.

As part of the operation of the interactive elements, the front-end developer must ensure the user controls the placement of focus (Primary). This requires implementations that update to the page content without shifting focus to other places on the scren.

End User Scenarios: Several

The general issue caused for users is the fact that focus, when shifted unexpectedly without the user's input (or knowledge, in some cases), breaks their experience - what is going on the page, knowing where they are and what they are doing. This makes it more difficult to complete the task on the page or screen and certainly causes frustration.

Kaseem, teenager who is deaf and blind

Kaseem is a teenager who is deaf and recently became legally blind too, which means she can see only small portions of a screen and read text when it is significantly enlarged. She uses screen magnification software to enlarge the text on websites to a suitable font size, displays text on a refreshable Braille device and a large computer screen with high resolution and high luminosity (brightness).

The viewport, or area that Kaseem sees when the screen is magnified, is very small. So the focus must be in or very close to that 'viewport' at all times. Shifting it unexpectedly to a completely different areas of the screen makes it very difficult to find and then move to that area, especially if she has no idea where the focus has landed. The focus could move to another area on the page, or to a completely new page.

Alex, reporter with repetitive stress injury

Alex has worked as a reporter for more than 20 years and has developed a repetitive strain injury that makes it painful to use a mouse and to type for extended periods of time. Alex encounters problems when websites and other online content cannot be navigated by keyboard commands alone.

If when navigating the web page, if the keyboard focus shifts unexpectedly, can Alex get back to the task he was doing?

Ilya, senior staff member who is blind

Ilya is blind. She is the chief accountant at an insurance company that uses web-based documents and forms over a corporate intranet and like many other blind computer users, she does not read Braille.

Ilya relies on the screen reader assistive technology to let her know where she is on the web page. Moving the focus unexpectedly breaks the context of the page and her mental map or perception of the page.

Yun, retiree with low vision, hand tremor, and mild short-term memory loss

Yun is an 85 year-old with reduced vision, hand-tremor, and mild memory loss; common age-related impairments for someone his age. Yun regularly browses the web reading news sites.

Read the full stories


Front-End Development Checkpoints – Starter List

ID WCAG SC Conformance Level Content Type Checkpoint Main Role Role Ownership
Primary Secondary Contributor(s)
DOC-002 1.3.1 A Document Structure HTML elements are used according to the HTML specification. Development Front-End Development UX Design none
DOC-022 2.4.3 A Document Structure The tab order logically and predictably follows the expected interaction order of the visual design. Development Front-End Development UX Design
Visual Design
none
KBD-001 2.1.1 A Keyboard Access All actionable elements can be reached, using only the keyboard. Development Front-End Development UX Design none
KBD-011 2.4.7 AA Keyboard Access Every element that receives keyboard focus displays a visible focus indicator. Development Front-End Development Visual Design none
FRM-002 1.3.1 A Form Interactions Text labels and form controls are programmatically associated using the FOR and ID attributes. Development Front-End Development none none
CSS-007 1.3.3 A CSS Presentation Users relying High Contrast themes don't lose information as a result of doing so. Development Front-End Development none none
CSS-015 1.4.4 AA CSS Presentation CSS techniques are used to ensure that content doesn't overflow, overlap or get truncated as a result of increasing the text size. Development Front-End Development UX Design Visual Design
CSS-017 2.4.7 AA CSS Presentation The CSS outline property of objects that receive keyboard focus are not set to zero or none. Development Front-End Development none none
2.4.1 A Navigation Skip links and similar mechanisms point to the expected destination. Development Front-End Development none none
3.2.2 A Navigation Focus is not unexpectedly shifted without preliminary user input. Development Front-End Development none none


Front-End Development Checkpoints

ID WCAG SC Conformance Level Content Type Checkpoint Main Role Role Ownership
Primary Secondary Contributor(s)
IMG-003 1.1.1 A Images and Graphs Purely decorative images are provided with null alt attribute values (or other equivalent means). Development Front-End Development none none
IMG-004 1.1.1 A Images and Graphs Null alt attribute values are used for images that are already described in text in adjacent page content. Development Front-End Development UX Design Content Authoring
Visual Design
IMG-005 1.1.1 A Images and Graphs Adjacent linked images and text links pointing the same URL are combined into single links. Development Front-End Development UX Design none
IMG-007 1.1.1 A Images and Graphs Informative images are marked up as foreground images, and not embedded as part of the CSS. Development Front-End Development none none
IMG-009 1.1.1 A Images and Graphs The purpose or function of complex images is conveyed using a descriptive alt attribute value (or other equivalent means). Development Front-End Development none none
IMG-012 1.1.1 A Images and Graphs The full explanation of complex images is provided through the longdesc attribute (or other equivalent means). Development Front-End Development none none
IMG-015 1.1.1 A Images and Graphs Text alternatives of dynamically updated images are simultaneously updated as the images change. Development Front-End Development UX Design Content Authoring
IMG-020 1.4.5 AA Images and Graphs Text that is visually made to be part of an image is handled through HTML and CSS instead. Development Front-End Development Visual Design Content Authoring
DOC-001 1.3.1 A Document Structure Informative content is provided through HTML markup. Development Front-End Development UX Design
Content Authoring
none
DOC-002 1.3.1 A Document Structure HTML elements are used according to the HTML specification. Development Front-End Development UX Design none
DOC-003 1.3.1 A Document Structure Navigation groupings are marked up using HTML list or nav elements (or other equivalent means). Development Front-End Development UX Design none
DOC-004 1.3.1 A Document Structure Header sections are marked up using HTML header elements (or other equivalent means). Development Front-End Development UX Design none
DOC-006 1.3.1 A Document Structure The main section of a page is marked up using a HTML main element (or other equivalent means). Development Front-End Development UX Design none
DOC-007 1.3.1 A Document Structure The footer of the page is marked up using a HTML footer element (or other equivalent means). Development Front-End Development UX Design none
DOC-008 1.3.1 A Document Structure Content that is complementary to the main section is marked up using HTML aside elements (or other equivalent means). Development Front-End Development UX Design none
DOC-009 1.3.1 A Document Structure HTML elements are used based on the semantics they provide, not based on what they look like. Development Front-End Development UX Design none
DOC-010 1.3.1 A Document Structure Decorative elements are embedded through the CSS presentation. Development Front-End Development Visual Design UX Design
DOC-011 1.3.1 A Document Structure All scripting behaviors are handled through JavaScript. Development Front-End Development none none
DOC-012 1.3.1 A Document Structure Elements that visually look like headings are marked up as such. Development Front-End Development UX Design
Content Authoring
none
DOC-014 1.3.1 A Document Structure Headings are marked up using h1 to h6 elements or other equivalent means. Development Front-End Development UX Design none
DOC-015a 1.3.1 A Document Structure Page contains a level 1 heading that describes the page content. Development Front-End Development UX Design
Content Authoring
none
DOC-017 1.3.1 A Document Structure Whitespace or pre-formatted text is not used to render content to appear as multiple columns or tabular information. Development Front-End Development none none
DOC-018 1.3.2 A Document Structure The source code (or DOM) order matches the suggested visual order of the design. Development Front-End Development Visual Design
UX Design
none
DOC-021a 4.1.2 A Document Structure Iframes are assigned title attribute values that describe their content. Development Front-End Development none none
DOC-022 2.4.3 A Document Structure The tab order logically and predictably follows the expected interaction order of the visual design. Development Front-End Development UX Design
Visual Design
none
DOC-024 4.1.1 A Document Structure Source code is properly nested, according to its specification. Development Front-End Development none none
DOC-025 4.1.1 A Document Structure Source code elements are provided with complete start and end tags (or are self-closed) according to specification. Development Front-End Development none none
DOC-026 4.1.1 A Document Structure ID attribute values assigned to elements are unique. Development Front-End Development none none
DOC-027 4.1.1 A Document Structure Elements do not contain duplicate attributes. Development Front-End Development none none
DOC-028 1.3.1 A Document Structure Native HTML elements are prioritized over other methods. Development Front-End Development UX Design none
KBD-001 2.1.1 A Keyboard Access All actionable elements can be reached, using only the keyboard. Development Front-End Development UX Design none
KBD-002 2.1.1 A Keyboard Access All active elements can be triggered, using only the keyboard. Development Front-End Development UX Design none
KBD-003 2.1.1 A Keyboard Access Device-specific programmatic event handlers are not used as the only way to trigger interactions. Development Front-End Development none none
KBD-006 2.1.1 A Keyboard Access Keyboard focus is not applied to non-active or static elements. Development Front-End Development UX Design none
KBD-007 2.1.2 A Keyboard Access Users can navigate away from all active elements, using only the keyboard. Development Front-End Development none none
KBD-008 2.4.3 A Keyboard Access Users can tab through active elements in an order that reflects the intended interaction order of the design. Development Front-End Development UX Design
Visual Design
none
KBD-009 2.4.3 A Keyboard Access Tabindex attributes are not assigned positive integer values. Development Front-End Development none none
KBD-011 2.4.7 AA Keyboard Access Every element that receives keyboard focus displays a visible focus indicator. Development Front-End Development Visual Design none
KBD-013 2.1.1 A Keyboard Access Custom active elements replicate all inherent keyboard behaviors of native active HTML elements. Development Front-End Development UX Design none
KBD-014 2.1.1 A Keyboard Access Non-interactive elements are not assigned JavaScript event handlers. Development Front-End Development none none
FRM-001 1.3.1 A Form Interactions Text labels are marked up using the label element (or other equivalent means). Development Front-End Development none none
FRM-002 1.3.1 A Form Interactions Text labels and form controls are programmatically associated using the FOR and ID attributes. Development Front-End Development none none
FRM-003 1.3.1 A Form Interactions Submit buttons in forms rely on a submit input type, a button element (or other equivalent means). Development Front-End Development none none
FRM-005 1.3.1 A Form Interactions Related form controls are properly grouped using HTML elements (or other equivalent means). Development Front-End Development UX Design, Visual Design
(groupings: FRM-007)
none
FRM-006 1.3.1 A Form Interactions Long option lists in select elements are grouped semantically using the optgroup element (or other equivalent means). Development Front-End Development UX Design
(groupings)
none
FRM-014 3.2.2 A Form Interactions Event handlers are not used to automatically submit forms. Development Front-End Development none none
FRM-015a 3.2.2 A Form Interactions Forms are not automatically submitted without the user's explicit intent. Development Front-End Development none none
FRM-016 1.3.1 A Form Interactions Native HTML controls are prioritized when creating forms. Development Front-End Development UX Design none
FRM-022 2.4.3 A Form Interactions Keyboard focus is programmatically moved to the error message when errors are returned. Development Front-End Development UX Design none
FRM-023 3.3.3 AA Form Interactions Instructions on how to fix errors are provided in text (inside their corresponding label elements or other equivalent means). Development Front-End Development Visual Design, UX Design Content Author
FRM-024 1.3.1 A Form Interactions Required fields are programmatically conveyed to assistive technologies. Development Front-End Development UX Design
(message relationships)
none
FRM-025 3.3.2 A Form Interactions Form controls have persistent visual labels. Development Front-End Development UX Design Visual Design
CSS-002 1.1.1 A CSS Presentation The meaning of icon fonts is available through HTML or a programmatic equivalent such as the aria-label attribute. Development Front-End Development none none
CSS-003 1.1.1 A CSS Presentation Icon fonts used to convey information are hidden from assistive technologies using the aria-hidden attribute (or other equivalent means). Development Front-End Development none none
CSS-004 1.1.1 A CSS Presentation Background images are embedded for decorative purposes only. Development Front-End Development UX Design
Visual Design
none
CSS-005 1.3.1 A CSS Presentation CSS pseudo-selectors such as :before and :after are not used to integrate informative content. Development Front-End Development none none
CSS-007 1.3.3 A CSS Presentation Users relying High Contrast themes don't lose information as a result of doing so. Development Front-End Development none none
CSS-015 1.4.4 AA CSS Presentation CSS techniques are used to ensure that content doesn't overflow, overlap or get truncated as a result of increasing the text size. Development Front-End Development UX Design Visual Design
CSS-016 1.4.5 AA CSS Presentation CSS background sprites don't include images of text, unless equivalent text alternatives are also provided as part of the HTML. Development Front-End Development Content Authoring none
CSS-017 2.4.7 AA CSS Presentation The CSS outline property of objects that receive keyboard focus are not set to zero or none. Development Front-End Development none none
2.4.1 A Navigation Skip links and similar mechanisms point to the expected destination. Development Front-End Development none none
2.4.1 A Navigation Skip links and similar mechanisms are included in the DOM at the location defined by the design. Development Front-End Development none none
2.4.3 A Navigation All active elements receive focus in a logical and predictable order that is prescribed by the suggested visual presentation. Development Front-End Development UX Design, Visual Design none
2.4.3 A Navigation Event handlers do not unexpectedly send the focus elsewhere on the page. Development Front-End Development none none
2.4.4 A Navigation Links are marked up using the anchor element, and have a valid href attribute values. Development Front-End Development none none
3.2.1 A Navigation Focus changes do not trigger the opening of new windows or modal dialogs. Development Front-End Development UX Design none
3.2.2 A Navigation Focus is not unexpectedly shifted without preliminary user input. Development Front-End Development none none

Front-End Developer Decision Tree Examples

Example 1

Checkpoint

  • I want adjacent linked images and text links pointing the same URL to be merged into single links.

Q1: Is this business-related? No

A Business Analyst are not concerned with such issues.

Q2: Is this visual design? No

A Visual Designer designed the images and layout but has little interest beyond confirming the final deliverable matches the intended presentation.

Q3: Is this content authoring? No

A Content Author wrote the text for the links but, like the Visual Designer, is unlikely to do more than proofread the final deliverable and confirm there are no typos or other content errors.

Q4: Is this UX Design? No

The UX Designer is likely to come up with the need for linked images and links. The UX Designer likely have worked with a Visual Designer to define what it should look like and create the images to use. Another task would be to ask the Content Author to create the text to go with the images. Since having a single link would be easier for all users it is likely a design principle a UX Designer would define as a standard.

Those steps are all design tasks. If this checkpoint was applied to a design document (such as a style guide) the UX Designer would be the Primary owner. But in this example the assumption is we are testing a completed page. So, in this context, the UX Design might be a Contributor or not involved.

Q5: Is this implementation? Yes

This checkpoint is highly dependent on the implementation to avoid creating two consecutive links. Since this guideline would likely be part of a common style guide it's unlikely that to be specified in the wireframes, comps or requirements. As a result it be up to the Developer to choose an implementation so the image and text are a single link.

Example 2

Checkpoints

  • I want no important images needing text equivalents to be placed as CSS background images.
  • I want the full description of complex images to be provided through the longdesc attribute.

Q1: Is this business-related? No

Business Analysts are not concerned with such issues.

Q2: Is this visual design? No

The Visual Designer likely chose or designed the images but will have little input on how it is done.

Q3: Is this content authoring? No

The Content Author certainly would provide the full description of the image. Depending on the context the role may have also influenced the image and its purpose.

In that case the author may have identified the images as "important" along with the text description when providing them to the developer. By definition that is a design deliverable. If that situation they may be a Contributor. But this checkpoint is for testing the final deliverable so the Content Author has little input beyond that.

Q4: Is this UX Design? No

The UX Designer likely has significant influence on the situation described here. The role almost certainly to have specified the use of second location for the description and the where the destination content is located.

These decisions should have been clearly documented as a general site-wide approach in a style guide or for the specific case. If the question was asked for a design deliverable the UX Designer would be the primary owner.

In the scenario here (testing a final website), the UX Designer should have already provided this information. If so, the role might be a Contributor.

Q5: Is this implementation? Yes

These checkpoints clearly focus on implementation (CSS, longdesc). Since developers choose the CSS implementation it's their responsibility to use approaches that satisfy the needs or standards for the site. When provided content (text alternatives or long descriptions) it's up to them to use the appropriate techniques.

Example 3

Checkpoint

  • I want "null" alt attributes (using alt="") to be used for images that are already described in text in adjacent page content.
  • I want decorative images to be ignored by assistive technology

Q1: Is this business-related? No

Business Analysts are not concerned with such issues.

Q2: Is this visual design? No

Images are created or chosen by Visual Designers. This includes whether they are truly decorative or have some meaning (and how that's communicated) is not part of their role.

Q3: Is this content authoring? No

The Content Author wrote the adjacent page content describing the image. As in Example 2, where the author may identify images as "important" the role should identify them in this instance as decorative. In both examples, the Content Author is unlikely to be anything other than a Contributor.

Q4: Is this UX design? No

The UX Designer, working with the Visual Designer, may define elements with images that are decorative. A simple example might be icon controls with text labels under or beside them as part of the site navigation or features.

In these cases the UX Designer should indicate the images are decorative. As with the previous examples, these might be defined in a style guide. And (again) if this checkpoint was applied to the design document the UX Designer might be the Primary owner.

But, as with the other examples, for a completed site this checkpoint already identified the image as being decorative. The designer is unlikely to be more than a Contributor.

Q5: Is this implementation? Yes

The first case for this checkpoint is very specific about the use of alt="". This almost always applies to images implemented using the <img> tag. If told that an image is decorative and uses <img> the developer should know that that alt is a required attribute and decorative images should be set it to a null string.

The second case is similar but more general. The Developer may choose to use another approach (such as CSS background images) which has the same effect as alt="" in <img>s. Whichever case or implementations are used the Developer role is still the primary owner since failure to meet this checkpoint has identified the image as decorative.