-
Notifications
You must be signed in to change notification settings - Fork 11
Views
Entry-point with links to the important sections of the site. Main tool will be the search field from which users will look for data.
Make sure buttons stick out (has proper contrast and borders) from background image.
Address view shows data divided into 2 sections with tabs.
- Services for current address which shows most integral services (like schools, hospital etc) for people living in this address.
- Close-by - which shows a list of all units close to current address
We are using tabs to divide information to give best browsing experience for screen readers.
- Area tab will be moved to it's own view and address view will offer a link to it
- Add most common services tab for address view similar to old UI version
Area view displays different types of divisions and districts on the map, based on the user’s selection. User can also input their own address, so that the area data is localized to the area where the user belongs. This can help users to find which district they belong, while also seeing neighbouring districts and their services. Services tab displays units that are linked to the area type. This can help user to find, for example, their helath station or schools.
An example use-case for this view is: a user wants to measure if a service of a neighbouring district is closer to home address than the service of the district where tthe address is assigned to.
- A second tab for services was used, because listing the same information that is displayed on the map (units for each area) is accessible to all user, unlike just displaying the info on the map.
- Another solution to use buttons intead of radio buttons in the area list was discussed (more of this below on Accessibility-section). If original solution causes porblems, this idea can be revisited.
The problem regarding the view’s accessibility was that the area data is mostly visual data and focused on displaying it on map. Since the map is unaccessible for some users, a different approach was needed to provide the same data for all users. The second tab to display the service data was a solution to this, since it allows users to see the local district services as well as the neighbouring services and their distances realtive to the user’s chosen home address.
Another solution was also proposed to the district list on the first tab: radio buttons could be replaced by buttons, that open the second tab when pressed. This would help users (especially screen reader users) to get to the list of services more easier. This would fix the issue, where screen reader users need to navigate all the way to the top of the page to change the tab after selecting a radio button. However the address input bar location would need to be rethought in this implementation.
Other accessibility notes:
- The address search box results list must be browsable by up and down arrows while the textfield is active
- The number of address results must be informed to the user by aria-live when they appear (over two letters have been inputted)
- The drawer buttons must display their open state by aria-expanded value
Map view renders data to map using leaflet markers and polygons.
Currently we've decided to keep map usable only for screen readers. Markers and polygons should not be focusable and should have aria-hidden so user cannot end up in map. Map container element should have informative text to describe that map cannot be used by screen readers
- Make markers and clusters same size so clusters don't overshadow markers. Also both need to be bigger than transit markers since we want unit markers to be more recognizable on map. 07.02.2020
Search view is the primary way for browsing data. Our main search method is through free-form text search. Search view results are divided into 3 sections: units, addresses, and services. Search data is distributed to these sections and sections are shown as tabs. If only single result is provided by the search, it automatically redirects the user to related result page.
We decided to separate data into sections for easier browsing especially for screen readers. More information about the reasoning can be found in Unit view's accessibility section.
Tabs should have understandable aria-label texts explaining content more specifically ie. explaining that numbers in tabs are matches.
Settings info element's link should take user to settings page and move focus to title. Moving back from settings should take user back to search page and move focus to same settings link.
Search view should have a dynamic aria-live element for giving information about the search status to screen reader users.
Make sure search bar works according to SearchBar component's accessibility definitions.
Make sure pagination element works according to Pagination component's accessibility definitions.
Service view shows list of units related to service.
Make sure pagination and list works according to component specifications.
Settings is a dialog view that gives user an interface to access their personal settings: city restriction, accessibility settings, map type.
Since Settings view works like a dialog it should prevent user from leaving the view. This means that user shouldn't be able go past the last element. View should have invisible last element that automatically moves focus back to first element. When closing settings element focus should move back to original opening button.
Make sure radio elements are grouped under an element with role="radiogroup" with aria-label or aria-labelledby. Make sure checkbox elements are grouped under an element with role="group" and have aria-label or aria-labelledby.
Make sure heading levels are correct.
- We decided to remove Close-button from settings snackbar because people assumed it closed whole settings window rather than snackbar itself. Also we decided that this wouldn't cause problems since user at this point would be leaving settings or if they decide to change settings snackbar would disappear. 07.02.2020
Unit view lists the following details of a unit:
- Image
- Highlights
- Contact information
- Address
- Opening hours
- Phone numbers
- Email address
- Contact persons
- Social media links
- E-services
- Unit description
- Service categories
- Accessibility shortcomings and information
- Events
- Reservable objects
Main concern when creating unit view was how to divide unit data in more digestible chunks. After going through different iterations with the help of accessibility consultants we've decided on using tabs for dividing content. This gives screen readers good preview to incoming content by first selecting desired tab. Tabs also remove need for dynamic elements like accordion-elements. For accessibility's sake we want to keep the content as static as possible in order to avoid confusion for screen reader users.
Events and reservable objects required a new page for browsing data. Initially we tried using dynamic loading for these information sets. But it ended up becoming unusable for screen readers. We decided that a paginated listing was the best solution. Having 2 paginated lists within a single tab made the page hard to navigate with screen readers. In the end we decided the best solution would be showing only small amount of data and giving user option to start browsing data in a separate page.
- Clicking "show more events/reservable objects"-button should take user to new browsing page and place focus on back button for easy navigation back. Browsing page's back button click should place focus back to relative "show more..." button so navigation can continue easily and screen reader user doesn't lose sense of direction
Checklist
- Ensure headings are in correct level orders
Unit page sticky elements should have only tabs-element. This because on devices with smaller heights usable area get too small. 07.02.2020
Unit's events moved to own page. Events were originally loaded gradually (10 at a time) by pressing button. This caused problems with screen readers and moving user's focus back to last list item was problematic especially with long fetch times.
- We decided to move unit's events to their own page. 20.01.2020