The question then is, how to improve UX and web accessibility at the same time for your Angular app?<\/p>\n\n\n\n
What Is Website Accessibility?<\/h2>\n\n\n\n
The Internet is for everyone and website accessibility is key. Basically, web accessibility (or\u202feAccessibility) is a practice that if well-established will make any website usable for all types of visitors and on any type of devices, regardless of things like:<\/p>\n\n\n\n
- \n
- User tech know-how or previous experience with the World Wide Web.<\/li>\n\n\n\n
- People who use assistive technologies.<\/li>\n\n\n\n
- Speed and bandwidth.<\/li>\n\n\n\n
- Use\/No use of mouse.<\/li>\n<\/ul>\n\n\n\n
This is an extremely important goal to achieve by any web app\/website because when they are designed and developed in the best possible way, more users have the same\u202faccess to its content and functionalities.<\/p>\n\n\n\n
Why Is Website Accessibility Important?<\/h2>\n\n\n\n
At Infragistics, we want to ensure an optimal user experience, regardless of whether you are using a mouse, a touchpad or just a keyboard. That is why we have created a new user interface pattern for keyboard navigation within a page, called Active element navigation<\/strong> within our Ignite UI for Angular Grid. This pattern reduces the number of tab stops within the interface designed for the igxGrid to only five, and exposes plenty of new keyboard shortcuts for efficiency.<\/p>\n\n\n\n
Each tab stop element has a single-entry point, and from there users can easily navigate to different items in the corresponding Angular Grid element container by simply using the arrow keys. Thus, simplifying navigation and improving website usability.<\/p>\n\n\n\n
![\"Header](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/04\/34\/6545.header-navigation.gif\" "\\"Header")
<\/figure>\n\n\n\n<\/p>\n\n\n\n
One of the biggest differentiators for our Ignite UI toolbox<\/a> is that, unlike other grids on the market, we put end-users and their experience at the forefront of everything. That\u2019s why we ensure component and feature parity across all major technologies. Meaning that whatever you do in Angular Grid<\/a>, can be done and easily transitioned to Ignite UI for Blazor<\/a> or Web Components<\/a> as well. There won\u2019t be any difference. So, if you care about your users, Ignite UI is the solution.<\/p>\n\n\n\n
What is ARIA Support?<\/h2>\n\n\n\n
In short, ARIA stands for <\/span>Accessible Rich Internet Application<\/span> and is a set of <\/span>attributes <\/span>that is added<\/span> to your<\/span> HTML elements<\/span>,<\/span> mak<\/span>ing<\/span> web apps and <\/span>web content <\/span>available<\/span> to<\/span> every<\/span> user<\/span>. ARIA support, then, is the capabilities of technologies, browsers, screen readers, and toolkits to <\/span>support at least some of <\/span>the <\/span>ARIA<\/span> properties<\/span>.<\/span><\/span><\/p>\n\n\n\n
Page Tab Sequence and Aria<\/h2>\n\n\n\n
As described in the Fundamental Keyboard Navigation Conventions<\/a> section of W3C\u2019s WAI-ARIA Authoring Practices 1.1, the tab sequence should include only one focusable element of a Composite UI Component. We have five such <\/i>C<\/i>omposite UI <\/i>C<\/i>omponents<\/i><\/a>, hence five tab stops:<\/p>\n\n\n\n
- \n
- Toolbar\/Group by Area, if existing.<\/li>\n\n\n\n
- Header row container – The first cell of the header row will become active.<\/li>\n\n\n\n
- Tbody – The first igxCell (0,0) of the body container will become active.<\/li>\n\n\n\n
- Footer – The first cell in the Column Summary will become active (if summaries are enabled).<\/li>\n\n\n\n
- Pager UI – Items per page drop-down will become active.<\/li>\n<\/ul>\n\n\n\n
Pressing the\u202fTab\u202fkey will move focus out of the current container to the next element in the tab sequence.<\/strong> This is illustrated with the image below with the tab sequence “Grid Toolbar” -> “Grid Headers” -> “Grid Body Container” -> “Summaries” -> “Footer – Grid Paginator”.<\/p>\n\n\n\n
![\"Page](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/04\/34\/tab-stop-elements.gif\" "\\"Page")
<\/figure>\n\n\n\n<\/p>\n\n\n\n
Each of the five tab-stop containers can be considered as a separate grouping entity, reducing the number of tab stops on the page. The Grid has a rich DOM structure along with plenty of virtualized containers, which allows for greater performance. Therefore, we have more than one focusable Grid element part of the page tab sequence. This allows us to have separate and rich navigation on all tab stop containers.<\/p>\n\n\n\n
Note: Keep in mind that the default-browser-focusable actions are persisted. We are not preventing focus of the HTML element part of ng-templates or other elements added separately in the Grid. The browser will handle its focus actions by default. There is no need to apply additional focusable<\/strong> <\/strong>directives.<\/p>\n\n\n\n
Active Element Navigation<\/h2>\n\n\n\n
Referring back to W3c\u2019s Fundamental Keyboard Navigation Conventions<\/a>, all interactive UI components must be accessible via a keyboard. This is best achieved by either including them in the tab sequence or by making them reachable from a component that is in the tab sequence. In the Grid’s<\/a> case navigation, it is possible to move through each one of these focusable containers with the navigation keys (Arrow keys, home\/end, ctrl + ‘action key’). This is where the Active element navigation<\/strong> concept kicks in<\/p>\n\n\n\n
Here, the active element is the first visible element from the focused container. BUT<\/i> this element does not become focused. The focus remains on the actual container. The active element gives you the ability to navigate through most of the Grid elements, and activate features based on the focused Composite component.<\/p>\n\n\n\n
How Do Focused Elements Differ from Selected and Active Elements?<\/h2>\n\n\n\n
We consider the focused element<\/a> as a pointer – it tracks the path of navigation (page tab sequence). As we already know, we have five such composite elements. The Active element is used to navigate through these focusable containers. As you can see in the image below, the thick orange border with the gray cell background indicates the current active element for visual users.<\/p>\n\n\n\n
Selected elements are elements that have aria-selected=”true”<\/em>. In the igxGrid case, aria-selected<\/em> is applicable to all three types of selection elements – cell, row, and column selection (WAI-ARIA<\/a>).<\/p>\n\n\n\n
Key takeaways from the sections above:<\/strong><\/p>\n\n\n\n
- \n
- Focused element – tracking the path of page tab sequence – Grid’s toolbar, header, body, footer, and pager.<\/li>\n\n\n\n
- Active element – navigates within the five focusable containers with the arrow keys (and special keys like home\/end).<\/li>\n\n\n\n
- Selected element – having aria-selected=”true”<\/em> along with Grid selection styles applied (cell, row, or column selection).<\/li>\n<\/ul>\n\n\n\n
We follow the guidelines within the WAI-ARIA Authoring Practices Guide<\/a> for specific recommendations on key and behavior mapping. So, the roles that ARIA Grid provides are recognizable in the Ignite UI for Angular Grid as well: grid, row, grid cell, row header, and column header.<\/p>\n\n\n\n
Tab Navigation<\/h2>\n\n\n\n
The grid follows the primary keyboard navigation convention<\/a> that the\u202ftab<\/strong>\u202fand shift + tab<\/strong>\u202fkeys move the focus from one UI component to another. The arrow keys change the active state inside of components that include multiple elements.<\/p>\n\n\n\n
Compared to previous tab interaction behavior, we’ve changed the following:<\/p>\n\n\n\n
- \n
- You cannot use the tab<\/strong> key to navigate between the cells in the IgxGrid<\/strong>. The navigation is now performed only with arrow keys.<\/li>\n\n\n\n
- With the tab <\/strong>key, you can only navigate to the next editable cell (only when the cell is in edit mode). When the last editable cell (of the row) is reached, the navigation will continue to the next row’s editable cell. If the last editable cell is reached, the tab navigation will continue to the next focusable tab stop element.<\/li>\n<\/ul>\n\n\n\n
The Performance Improvements & Code Enhancements We Did<\/h2>\n\n\n\n
As a result of the new keyboard navigation concept, we have been able to optimize our code and implement performance improvements in the Ignite UI for Angular Grid. They include:<\/p>\n\n\n\n
- \n
- Removed cell focus and blur handlers.<\/li>\n\n\n\n
- Wheel and view detach handlers have been removed as well.<\/li>\n\n\n\n
- Reduced navigation services. We previously had four navigation services for the Grid, HierarchicalGrid, TreeGrid, and MRL functionality. Now we have only three. With the old implementation, on scrolling with virtualized content, we were changing the cell context (the actual shell remained the same). But there was a problem with the browser not allowing us to focus on an already focused element. We had to blur the cell focus, change the cell context and focus it again. Now that is no longer an issue.<\/li>\n\n\n\n
- Touch device enhancements. Now, if we have a focused cell on scrolling, we blur the cell before detaching the wheel handler.<\/li>\n\n\n\n
- Application level performance boost with `events stacking`. Use `ngZoneEventColescing: true.<\/li>\n<\/ul>\n\n\n\n
Const bootstrap = () =>\u00a0platformBrowserDynamic().bootstrapModule(AppModule, {\u00a0ngZoneEnetCoalescing: true });\u00a0<\/pre>\n\n\n\nKeyboard Navigation Features Integration<\/h2>\n\n\n\n
Let’s focus on the keyboard navigation features integration. Our Angular Grid has plenty of features and we’ve considered all of them carefully to ensure that they work properly with the new changes.<\/p>\n\n\n\n
- \n
- Header navigation<\/strong>\n
- \n
- We now have a smooth column header and column group navigation. Check out this header interactions list<\/a>, which explains how to activate a certain feature with a key combination. Live demo<\/a>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- Excel-style filter and default filtering row<\/strong>\n
- \n
- Ctrl + Shift + L<\/i> will open the Excel-style filter\/default (row) filter.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- Advanced filtering<\/strong>\n
- \n
- Alt + L<\/i> opens the advanced filter dialog.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- Sorting<\/strong>\n
- \n
- Ctrl + Arrow up<\/i> sorts the active column header in ASC order. If the column is already sorted in ASC, it will remove the sorting (tri state none).<\/li>\n\n\n\n
- Ctrl + Arrow down<\/i> sorts the active column header in DSC order. If the column is already sorted in DSC, it will remove the sorting (tri state none).<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- Group by <\/strong>\n
- \n
- S<\/i>hift + Alt + Arrow right <\/i>to group by the active column.<\/li>\n\n\n\n
- Shift + Alt + Arrow left<\/i> ungroup the active column (remove it from the group by criteria).<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- Multi-column headers <\/strong>\n
- \n
- Alt + left\/up arrow key <\/i>\u2013 collapse.<\/li>\n\n\n\n
- Alt + right\/down arrow key <\/i>\u2013 expand.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- Column Selection<\/strong>\n
- \n
- Space key press<\/i> – select a column.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
![\"Different](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/04\/34\/different-key-combinations.gif\" "\\"Different")
<\/figure>\n\n\n\n<\/p>\n\n\n\n
Note<\/b>: If you are using a screen-reader, keep in mind that on an initial header click, we focus the whole header container and the screen reader will read all header captions. Following a click on the header, the header caption + selection state will be read. Example – Company name, column header selected.<\/i><\/p>\n\n\n\n
- Alt + right\/down arrow key <\/i>\u2013 expand.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- Shift + Alt + Arrow left<\/i> ungroup the active column (remove it from the group by criteria).<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- Ctrl + Arrow down<\/i> sorts the active column header in DSC order. If the column is already sorted in DSC, it will remove the sorting (tri state none).<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- Sorting<\/strong>\n
- Advanced filtering<\/strong>\n
- Excel-style filter and default filtering row<\/strong>\n
- We now have a smooth column header and column group navigation. Check out this header interactions list<\/a>, which explains how to activate a certain feature with a key combination. Live demo<\/a>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- Header navigation<\/strong>\n
- With the tab <\/strong>key, you can only navigate to the next editable cell (only when the cell is in edit mode). When the last editable cell (of the row) is reached, the navigation will continue to the next row’s editable cell. If the last editable cell is reached, the tab navigation will continue to the next focusable tab stop element.<\/li>\n<\/ul>\n\n\n\n
- You cannot use the tab<\/strong> key to navigate between the cells in the IgxGrid<\/strong>. The navigation is now performed only with arrow keys.<\/li>\n\n\n\n