Improve UI accessibility - Focus on screen reader support

CHANGELOG.md

@@ -49,6 +49,7 @@ _Breaking developer changes, which may affect downstream projects or sites that
 #### :sparkles: Usability & Accessibility
 * Add a preview to colour fields, showing a native colour picker dialog on click ([#8782], thanks [@k-yle])
 * Tag keys of a multi-selection can now also be changed in the tags editor when the tag values differ in the selected features. ([#8836])
+* Improve screen reader accessibility ([#8835], thanks [@mbrzakovic])
 #### :scissors: Operations
 * Split operation now indicates more clearly when multiple ways will be affected and gives a hint how to restrict the operation to a single line ([#8818])
 * Many operations now better preserve OSM object history ([#8839], thanks [@tpetillon])
@@ -92,10 +93,12 @@ _Breaking developer changes, which may affect downstream projects or sites that
 [#8825]: https://github.com/openstreetmap/iD/pull/8825
 [#8828]: https://github.com/openstreetmap/iD/pull/8828
 [#8831]: https://github.com/openstreetmap/iD/issues/8831
+[#8835]: https://github.com/openstreetmap/iD/pull/8835
 [#8836]: https://github.com/openstreetmap/iD/issues/8836
 [#8839]: https://github.com/openstreetmap/iD/pull/8839
 [@k-yle]: https://github.com/k-yle
 [@tpetillon]: https://github.com/tpetillon
+[@mbrzakovic]: https://github.com/mbrzakovic
 
 # 2.20.2
 ##### 2021-Oct-28

css/80_app.css

@@ -81,9 +81,14 @@ h2 {
     font-weight: bold;
     margin-bottom: 20px;
 }
+.header h2 {
+    font-size: 20px;
+    line-height: 1.25;
+    font-weight: bold;
+    margin-bottom: 0px;
+}
 
 h3:last-child,
-h2:last-child,
 h4:last-child { margin-bottom: 0;}
 
 h3 {
@@ -3652,12 +3657,13 @@ li.issue-fix-item button:not(.actionable) .fix-icon {
     padding: 10px;
 }
 
-.display-control h5 {
+.display-options-container label {
     padding-bottom: 0;
     padding-top: 10px;
 }
 
-.display-control h5 span {
+.display-options-container label span {
+    font-weight: bold;
     margin: 5px;
 }
 

data/core.yaml

@@ -12,6 +12,12 @@ en:
     list: list
     text: text
     deselect: deselect
+    close: close
+    forward: forward
+    backward: backward
+    expand: expand
+    collapse: collapse
+    plus: add
   toolbar:
     inspect: Inspect
     undo_redo: Undo / Redo
@@ -704,6 +710,7 @@ en:
     features: Features
     title_count: "{title} ({count})"
     add_to_relation: Add to a relation
+    add_to_tag: Add a tag
     new_relation: New relation...
     choose_relation: Choose a parent relation
     role: Role
@@ -713,7 +720,7 @@ en:
       one: "{n} result for {search}"
       other: "{n} results for {search}"
     no_documentation_key: "There is no documentation available."
-    edit_reference: "edit/translate"
+    edit_reference: "edit/translate documentation"
     wiki_reference: View documentation
     wiki_en_reference: View documentation in English
     key_value: "key=value"
@@ -740,6 +747,8 @@ en:
         type: Type
         default: Default
         layer: Layer
+    increment: increment
+    decrement: decrement
     add: Add
     none: None
     node: Node
@@ -765,6 +774,7 @@ en:
       network_ref_direction: "{network} {ref} {direction}"
       network_ref_from_to: "{network} {ref} from {from} to {to}"
       network_ref_from_to_via: "{network} {ref} from {from} to {to} via {via}"
+    speed_unit: "Speed unit"
     roadheight:
       # symbol for meters
       meter: m
@@ -802,6 +812,12 @@ en:
       tooltip: Show coordinates and regional details.
     fix_misalignment: Imagery Offset
     offset: "Drag anywhere in the gray area below to adjust the imagery offset, or enter the offset values in meters."
+    offset_label: "Adjust Imagery Offset"
+    nudge:
+      top: "nudge top"
+      left: "nudge left"
+      right: "nudge right"
+      bottom: "nudge bottom"
   map_data:
     title: Map Data
     description: Map Data

modules/renderer/tile_layer.js

@@ -198,6 +198,7 @@ export function rendererTileLayer(context) {
         image.enter()
           .append('img')
             .attr('class', 'tile')
+            .attr('alt', '')
             .attr('draggable', 'false')
             .style('width', _tileSize + 'px')
             .style('height', _tileSize + 'px')

modules/ui/commit.js

@@ -220,12 +220,13 @@ export function uiCommit(context) {
 
         headerTitle
             .append('div')
-            .append('h3')
+            .append('h2')
             .call(t.append('commit.title'));
 
         headerTitle
             .append('button')
             .attr('class', 'close')
+            .attr('title', t('icons.close'))
             .on('click', function() {
                 dispatch.call('cancel', this);
             })

modules/ui/conflicts.js

@@ -60,11 +60,12 @@ export function uiConflicts(context) {
         headerEnter
             .append('button')
             .attr('class', 'fr')
+            .attr('title', t('icons.close'))
             .on('click', cancel)
             .call(svgIcon('#iD-icon-close'));
 
         headerEnter
-            .append('h3')
+            .append('h2')
             .call(t.append('save.conflict.header'));
 
         var bodyEnter = selection.selectAll('.body')

modules/ui/data_editor.js

@@ -26,13 +26,14 @@ export function uiDataEditor(context) {
         headerEnter
             .append('button')
             .attr('class', 'close')
+            .attr('title', t('icons.close'))
             .on('click', function() {
                 context.enter(modeBrowse(context));
             })
             .call(svgIcon('#iD-icon-close'));
 
         headerEnter
-            .append('h3')
+            .append('h2')
             .call(t.append('map_data.title'));
 
 

modules/ui/disclosure.js

@@ -5,7 +5,7 @@ import { svgIcon } from '../svg/icon';
 import { utilFunctor } from '../util';
 import { utilRebind } from '../util/rebind';
 import { uiToggle } from './toggle';
-import { localizer } from '../core/localizer';
+import { t, localizer } from '../core/localizer';
 
 
 export function uiDisclosure(context, key, expandedDefault) {
@@ -30,7 +30,9 @@ export function uiDisclosure(context, key, expandedDefault) {
 
         // enter
         var hideToggleEnter = hideToggle.enter()
+            .append('h3')
             .append('a')
+            .attr('role', 'button')
             .attr('href', '#')
             .attr('class', 'hide-toggle hide-toggle-' + key)
             .call(svgIcon('', 'pre-text', 'hide-toggle-icon'));
@@ -45,6 +47,8 @@ export function uiDisclosure(context, key, expandedDefault) {
 
         hideToggle
             .on('click', toggle)
+            .attr('title', t(`icons.${_expanded ? 'collapse' : 'expand'}`))
+            .attr('aria-expanded', _expanded)
             .classed('expanded', _expanded);
 
         hideToggle.selectAll('.hide-toggle-text')
@@ -82,7 +86,9 @@ export function uiDisclosure(context, key, expandedDefault) {
             }
 
             hideToggle
-                .classed('expanded', _expanded);
+                .classed('expanded', _expanded)
+                .attr('aria-expanded', _expanded)
+                .attr('title', t(`icons.${_expanded ? 'collapse' : 'expand'}`));
 
             hideToggle.selectAll('.hide-toggle-icon')
                 .attr('xlink:href', _expanded ? '#iD-icon-down'

modules/ui/entity_editor.js

@@ -42,25 +42,29 @@ export function uiEntityEditor(context) {
             .append('div')
             .attr('class', 'header fillL');
 
+        var direction = (localizer.textDirection() === 'rtl') ? 'forward' : 'backward';
+
         headerEnter
             .append('button')
             .attr('class', 'preset-reset preset-choose')
-            .call(svgIcon((localizer.textDirection() === 'rtl') ? '#iD-icon-forward' : '#iD-icon-backward'));
+            .attr('title', t(`icons.${direction}`))
+            .call(svgIcon(`#iD-icon-${direction}`));
 
         headerEnter
             .append('button')
             .attr('class', 'close')
+            .attr('title', t('icons.close'))
             .on('click', function() { context.enter(modeBrowse(context)); })
             .call(svgIcon(_modified ? '#iD-icon-apply' : '#iD-icon-close'));
 
         headerEnter
-            .append('h3');
+            .append('h2');
 
         // Update
         header = header
             .merge(headerEnter);
 
-        header.selectAll('h3')
+        header.selectAll('h2')
             .html(_entityIDs.length === 1 ? t.html('inspector.edit') : t.html('inspector.edit_features'));
 
         header.selectAll('.preset-reset')

modules/ui/feature_list.js

@@ -33,7 +33,7 @@ export function uiFeatureList(context) {
             .attr('class', 'header fillL');
 
         header
-            .append('h3')
+            .append('h2')
             .call(t.append('inspector.feature_list'));
 
         var searchWrap = selection

modules/ui/field_help.js

@@ -201,6 +201,7 @@ export function uiFieldHelp(context, fieldName) {
         titleEnter
             .append('button')
             .attr('class', 'fr close')
+            .attr('title', t('icons.close'))
             .on('click', function(d3_event) {
                 d3_event.stopPropagation();
                 d3_event.preventDefault();

modules/ui/fields/input.js

@@ -110,6 +110,10 @@ export function uiFieldText(field, context) {
                     var which = (d > 0 ? 'increment' : 'decrement');
                     return 'form-field-button ' + which;
                 })
+                .attr('title', function(d){
+                    var which = (d > 0 ? 'increment' : 'decrement');
+                    return t(`inspector.${which}`);
+                })
                 .merge(buttons)
                 .on('click', function(d3_event, d) {
                     d3_event.preventDefault();

modules/ui/fields/localized.js

@@ -185,6 +185,7 @@ export function uiFieldLocalized(field, context) {
         translateButton = translateButton.enter()
             .append('button')
             .attr('class', 'localized-add form-field-button')
+            .attr('aria-label', t('icons.plus'))
             .call(svgIcon('#iD-icon-plus'))
             .merge(translateButton);
 
@@ -382,6 +383,7 @@ export function uiFieldLocalized(field, context) {
                 label
                     .append('button')
                     .attr('class', 'remove-icon-multilingual')
+                    .attr('title', t('icons.remove'))
                     .on('click', function(d3_event, d) {
                         if (field.locked()) return;
                         d3_event.preventDefault();

modules/ui/fields/roadspeed.js

@@ -60,6 +60,7 @@ export function uiFieldRoadspeed(field, context) {
             .append('input')
             .attr('type', 'text')
             .attr('class', 'roadspeed-unit')
+            .attr('aria-label', t('inspector.speed_unit'))
             .call(unitCombo)
             .merge(unitInput);
 

modules/ui/geolocate.js

@@ -77,6 +77,7 @@ export function uiGeolocate(context) {
 
     function updateButtonState() {
         _button.classed('active', _layer.enabled());
+        _button.attr('aria-pressed', _layer.enabled());
     }
 
     return function(selection) {
@@ -85,6 +86,7 @@ export function uiGeolocate(context) {
         _button = selection
             .append('button')
             .on('click', click)
+            .attr('aria-pressed', false)
             .call(svgIcon('#iD-icon-geolocate', 'light'))
             .call(uiTooltip()
                 .placement((localizer.textDirection() === 'rtl') ? 'right' : 'left')

modules/ui/improveOSM_editor.js

@@ -31,11 +31,12 @@ export function uiImproveOsmEditor(context) {
     headerEnter
       .append('button')
         .attr('class', 'close')
+        .attr('title', t('icons.close'))
         .on('click', () => context.enter(modeBrowse(context)))
         .call(svgIcon('#iD-icon-close'));
 
     headerEnter
-      .append('h3')
+      .append('h2')
         .call(t.append('QA.improveOSM.title'));
 
     let body = selection.selectAll('.body')

modules/ui/info.js

@@ -63,6 +63,7 @@ export function uiInfo(context) {
             title
                 .append('button')
                 .attr('class', 'close')
+                .attr('title', t('icons.close'))
                 .on('click', function(d3_event, d) {
                     d3_event.stopImmediatePropagation();
                     d3_event.preventDefault();

modules/ui/init.js

@@ -320,13 +320,15 @@ export function uiInit(context) {
             .append('a')
             .attr('target', '_blank')
             .attr('href', 'https://github.com/openstreetmap/iD/issues')
+            .attr('aria-label', t('report_a_bug'))
             .call(svgIcon('#iD-icon-bug', 'light'))
             .call(uiTooltip().title(t.html('report_a_bug')).placement('top'));
 
         issueLinks
             .append('a')
             .attr('target', '_blank')
             .attr('href', 'https://github.com/openstreetmap/iD/blob/develop/CONTRIBUTING.md#translating')
+            .attr('aria-label', t('help_translate'))
             .call(svgIcon('#iD-icon-translate', 'light'))
             .call(uiTooltip().title(t.html('help_translate')).placement('top'));
 

modules/ui/keepRight_editor.js

@@ -30,11 +30,12 @@ export function uiKeepRightEditor(context) {
     headerEnter
       .append('button')
         .attr('class', 'close')
+        .attr('title', t('icons.close'))
         .on('click', () => context.enter(modeBrowse(context)))
         .call(svgIcon('#iD-icon-close'));
 
     headerEnter
-      .append('h3')
+      .append('h2')
         .call(t.append('QA.keepRight.title'));
 
 

modules/ui/modal.js

@@ -1,5 +1,6 @@
 import { select as d3_select } from 'd3-selection';
 
+import { t } from './../core/localizer';
 import { svgIcon } from '../svg/icon';
 import { utilKeybinding } from '../util';
 
@@ -55,6 +56,7 @@ export function uiModal(selection, blocking) {
     modal
       .append('button')
       .attr('class', 'close')
+      .attr('title', t('icons.close'))
       .on('click', shaded.close)
       .call(svgIcon('#iD-icon-close'));
 

modules/ui/note_editor.js

@@ -46,13 +46,14 @@ export function uiNoteEditor(context) {
         headerEnter
             .append('button')
             .attr('class', 'close')
+            .attr('title', t('icons.close'))
             .on('click', function() {
                 context.enter(modeBrowse(context));
             })
             .call(svgIcon('#iD-icon-close'));
 
         headerEnter
-            .append('h3')
+            .append('h2')
             .call(t.append('note.title'));
 
 

modules/ui/note_header.js

@@ -42,6 +42,7 @@ export function uiNoteHeader() {
             iconEnter
                 .append('div')
                 .attr('class', 'note-icon-annotation')
+                .attr('title', t('icons.close'))
                 .call(svgIcon(statusIcon, 'icon-annotation'));
         });