本文產品是日本公司的辦公產品kintone，提供不會寫程式的人也可以依照不同的工作內容需求去客製化符合自己用法的線上app。
一開始的kintone可以說完全沒有在Accessibility角度進行投資。由於是2011年開始做的產品，那個時候其實不要說Accessibility，連UI或UX都沒有花太多時間著墨。很多功能螢幕閱讀器使用者甚至都無法使用。
kintone的Accessibility也是從2014年開始慢慢從有志人士開始在公司內開讀書會了解這個領域開始，到現在2022年持續地進行實際改善。
持續超過八年的Accessibility改善，這個過程我認為本身就十分具有啟發。
產品在操作上本就比網頁更為複雜，需要進行高度的互動，再加上有長年的技術負債，以及要兼具跟Accessibility不熟悉的開發組成員教育與協商的工作，在改善上的推行可以說道阻且長。
但是正如程式開發與設計需要經過長年反覆迭代與改善，Accessibility也不能一步到位，需要反覆迭代，也是值得長時間投入改善的領域。
在這篇文章中你可以知道：
- 十年的產品從什麼角度去做Accessibility改善：鍵盤與螢幕閱讀器的可操作性、顏色對比度調整等
- 為什麼要進行這些改善？
- 通常只能用滑鼠操作的Drag & Drop操作，如何做成讓鍵盤跟螢幕閱讀器都可以使用？
以下進入文章正文✨
大家好，我們是Cybozu的前端框架更新小組！
2022年8月，我們對自家公司產品的kintone進行了無障礙方面的改善。我們公司旗下的辦公產品kintone每個月都會進行產品改版更新，而在2022年8月的改版更新中，我們更新了kintone的前端框架，並且也進行了無障礙改善。
無障礙是指「誰都可以使用產品和服務」的意思。不管使用者身處在什麼樣的環境或是有什麼樣的身體能力，誰都可以使用產品和服務，獲得同樣的資訊，達成同樣的目標。
在我們公司的語境下，無障礙是指可以賦予使用者「成為團隊一員的能力」。我們公司希望透過改善無障礙，讓多樣的使用者能夠使用我們的產品，進而讓大家都能為團隊有所貢獻。更多我們的理念可以參考網站（日文內容）。
而我們的產品kintone，作為支援各個領域公司團隊的辦公軟體，現在正努力讓多種多樣的使用者都可以使用產品。我們產品的使用場景除了在普通的室內辦公室之外，也分布在工廠、工地、戶外農園，也有跨越不同年齡、性別、身體能力跟國籍的使用者。為了讓多樣的人可以在多樣的環境中使用我們的產品，我們需要努力做無障礙上的改善。
現在kintone正在升級前端框架，希望透過導入最新的技術與開發手法來加速開發速度。在2022年8月的框架升級成果中，有一項是統一改版設定畫面的layout，具體來說包含以下三個部分：
- 導覽列(Header，Global Navigation)
- 麵包屑導覽(Breadcrumb list)
- 設定保存與取消按鈕
在上文也提到，我們在更新了kintone前端框架的同時也進行了無障礙改善。前端框架改版是改善無障礙的一個非常好的時機，因為許多UI的部分會重新開始製作，我們可以在要重新製作各個部件的時候去討論各個部件需要考量的無障礙設計點，以往只能一小部分補洞式地去修繕，現在也得以透過這次的改版統一並且根本地改善了。
無障礙改善的三大成果：
- 可以使用不同的方法來操作UI部件
- 每個人都可以使用的Drag & Drop功能
- 每個人都看得清楚的顏色與對比度
為什麼改善？
能夠使用多樣的方法來操作UI部件很重要。例如為了更有效率地執行如輸入大量資料或是重複任務的時候，比起使用滑鼠點擊，使用鍵盤操作其實會更加有效率。全盲或是弱視使用者也有許多是不使用滑鼠，而是使用叫做Screen Reader的軟體來操作產品。也就是說，為了多樣的使用者，除了能用滑鼠操作之外，也需要對應這些不同的操作方式。
譯註延伸閱讀：讓視障者遨遊虛擬世界：螢幕閱讀器是什麼？
我們改善了什麼？
在更新前端框架之前，其實已經有許多原本不能使用鍵盤操作的部件可以被鍵盤識別並操作了。也有許多部件現在能夠更有效率地操作了。
在更新框架之前，現在鍵盤的所在位置（焦點）沒有辦法以視覺呈現，所以使用者很難知道現在鍵盤正在操作哪一個部件。現在的聚焦狀態使用更明顯的視覺變化，如顯示框線與顏色變化，使用者就可以很清楚地知道自己正在操作什麼了。
譯註延伸閱讀：鍵盤使用者的定錨器ー理解焦點就能在網路世界走磚步瓦
在更新前，有些部件完全無法被螢幕閱讀器識別，或是無法正確將它的狀態或內容唸出來。我們在更新後也有經過螢幕閱讀器的測試，確認有許多的物件可以被操作了。
下面的截圖是一些我們剛剛提到被改善的部件，例如「選擇使用者」、「選擇日期與時間」、「下拉式選單」、「複數選擇選單」等許多的部件都變得更容易操作了。
改善效果
其中一個例子是設定閱覽權限的功能。以前這個畫面是使用下拉式選單來選擇需要設定權限的範圍，而該部件以前是完全無法使用鍵盤與螢幕閱讀器操作的，也因此使用這兩種使用方法的使用者完全無法設定閱覽權限。而現在透過改善，有更多的使用者能夠使用這樣的功能了。
現在能夠使用鍵盤操作的部件
為什麼改善？
在我們的產品中，Drag & Drop是非常重要的一種操作模式。舉例而言，剛剛提到的閱覽權限的設定畫面中，可以透過Drag & Drop來將設定條件的優先順序進行重新排列，也因此，如果不能使用Drag & Drop的話，就無法去調整有多個條件的權限。另外還有許多其他頁面，例如設定分類，都會使用到這樣的操作方式。
我們改善了什麼？
在更新之前，只有特定的使用環境或是特定的使用者才能使用Drag & Drop。因為Drag & Drop是以滑鼠操作為前提的，所以一般只考慮滑鼠的話，鍵盤或是螢幕閱讀器都是無法使用的。也因為我們有太多的設定都要透過Drag & Drop的操作方式進行重複排列，特別是無法使用滑鼠的視覺障礙者或是肢體障礙者，至更新為止都是完全無法使用這些功能的。
在更新之後，不論是鍵盤或是螢幕閱讀器都可以操作Drag & Drop了。在鍵盤操作上，例如在閱覽權限的頁面中，我們可以使用鍵盤，將焦點移動到進行拖移的鍵盤部件後按下空白鍵，需要拖移的物件就會被抓起，然後我們可以使用上下鍵將物件移動到想要移動的位置後再次按下空白鍵，就可以像是滑鼠拖移一樣將物件們重新排列了。以往使用滑鼠進行拖移的操作模式，其實就可以使用上下鍵來做相同的操作。
而使用螢幕閱讀器也可以操作Drag & Drop。具體而言，在操作的時候螢幕閱讀器會告訴使用者操作的方法與結果。
- 當螢幕閱讀器聚焦在拖移部件的時候，螢幕閱讀器會告訴使用者可以使用這個功能進行重新排列。
- 當按下空白鍵開始拖移部件後，螢幕閱讀器會告訴使用者可以使用上下鍵來重新排列。
- 當按上下鍵進行排列的時候，螢幕閱讀器會告訴使用者所有的物件行數與現在所在的行數。
- 再度按下空白鍵確定拖移完畢後，螢幕閱讀器會告訴使用者完成了任務。
以下為螢幕閱讀器使用者操作示範影片（日文）：
改善效果
除了閱讀權限之外，也有例如設定分類等功能必須使用到Drag & Drop操作，從此之後在我們產品中，至今無法使用Drag & Drop的鍵盤與螢幕閱讀器使用者現在都可以使用了。
為什麼改善？
因為考慮到身處不同的環境與不同的使用者，顏色的辨識度是非常重要的。例如在線下座談會，可能會有使用者將產品畫面使用投影機投射出來。如果使用對比度更高的顏色，坐在離投影機比較遠的觀眾也能看得清楚內容。再比如剛剛也提到，其實不只是在室內的辦公環境，也有許多例如業務或是在戶外工地工作的使用者也會使用我們的產品。在室外可能會因為陽光的反射，對比度太低、太淡的顏色會很不容易看清。再例如視力不好或是低視能的使用者也需要對比度較高的顏色才能看得清楚。
我們改善了什麼？其效果如何？
在本次更新，我們將產品主色使用的藍色的對比度提高了。這個藍色常常在許多設定畫面中出現，例如按鈕或是超連結的顏色。在下面的截圖中，我們展示了更新前後的顏色，大家可以發現字變得更好讀了。之後除了這次展示的藍色之外，我們也會更針對易讀性這一塊進行更多的顏色調整。
我們產品的前端框架更新還在持續，而我們的無障礙部分也會繼續改善。
我們現在也在探討如何在功能更複雜的畫面上進行無障礙改善。例如我們的製作應用程式的介面，是可以使用上下左右將想要的部件任意拖移並放在畫面的各個地方的操作模式。為了讓更多元的使用者能夠操作這個功能，我們正在規劃如何使用鍵盤與螢幕閱讀器達成同樣的操作。
透過改善無障礙，有些以前完全無法使用我們產品的使用者現在都可以自由使用了。今後我們也將持續進行無障礙的改善！
本文授權與翻譯來自日本B2B SaaS公司cybozu的文章。
文章原文
