測試開發的路在哪？繼續開發測試工具，做測試業務，還是及時跳坑？

取個名字2019-05-07 22:32:26

程式碼功底OK的話，當前是繼續開發測試工具，測試框架，我現在做業務測試，主要是程式碼功能不行，對程式設計興趣不高。

泡菜小仙2019-12-14 09:01:50

有能力開發測試工具，其實已經很不錯了，不過現在業界對於測試工具這塊很多產品已經支撐。當然如果有能力轉開發也是一個不錯的選擇。

最後特別提醒，不要重複造輪子！

李子夏2019-12-14 20:11:48

我覺得關鍵是看公司前景，還有個人情況和定位，結合起來看吧。

測試開發做到一定程度，必然有轉型期問題，是轉去做開發經理，還是加強測試理論和實踐知識，轉去做測試經理，還是要尋求職位上的提升。如果轉去去普通的：編碼工程師或測試工程師，還是算了吧。

Calvin曉2020-04-13 15:05:42

建議你從行業考慮，目前最大的缺口在哪，未來最大的缺口又在哪？

資訊無障礙研究會2022-01-13 15:15:07

H5是大家常用的一種傳播工具，它方式靈活、互動性強且傳播速度快，配合優秀的創意內容能夠迅速在使用者中形成裂變傳播。

但往往很多開發者在製作H5時，並未考慮到無障礙這一點，導致障礙使用者（尤其是視障使用者）無法順暢地瀏覽H5並進行互動、傳播，也讓H5白白損失了一大波使用者。

那麼，應該如何開發一個無障礙H5呢？今天，我們以2021年國際殘疾人日當天在朋友圈圈粉無數的“123無障愛”活動H5為例，透過實際經驗來為大家介紹如何開發一個較為基礎的測試答題類無障礙H5，讓它能夠被視障使用者瀏覽使用。

“123無障愛”活動H5是一款測試答題類H5，需要使用者進行選項答題，並根據答題情況匹配對應的結果，同時生成海報進行下一輪傳播。所以，這款H5在無障礙方面的挑戰主要是在保持介面美觀的前提下，讓使用者順暢獲取H5所有展示資訊、順暢互動（答題、切換頁面等）。

在H5策劃時期，絕大多數策劃者都會遵循美觀的原則進行策劃設計，並保持整體H5視覺的統一性，所以H5中幾乎所有素材都是配套的圖片素材，這就導致所有的內容使用螢幕閱讀器的使用者是無法獲取的。

同時，使用一些自定義元件也會有無障礙問題，像基於VUE的UI庫的無障礙其實並不太理想，可能無法直接使用。

接下來，讓我們結合“123無障愛”活動H5的開發過程，看一看如何進行H5無障礙最佳化。

注：以下參考程式碼片段的開發環境為Vue2。x和微信內建瀏覽器測試結果，其他環境可能略有不同。

首先，需要為所有包含文字或互動內容的圖片新增上可以被螢幕閱讀器識別的元素。

我們來看一段程式碼片段。

1<！——html片段——>

2

大家可以看到，想要解決圖片朗讀的問題是非常簡單的，我們只要給img標籤新增alt屬性即可實現。當然了，我們H5裡面的所有按鈕也都設定了背景圖片，對於Button而言也只需要新增aria-label即可。

其次，解決完圖片朗讀後，接下來需要處理的就是每道題的選中狀態了。

圖：問答題選中某個選項後此選項會高亮顯示

前文提到過，為了美觀和整體的統一性，H5所用素材都是圖片，包括選項題的選項也是使用圖片代替的，這就導致選項本身並不是一個Radio（單選框），自然也不存在被選中的狀態，上圖的選中狀態是我們用了兩張圖片進行模擬的，當點選某個選項後，立即替換為另一張選中的圖片實現的效果。對於讀屏模式下的視障使用者而言，自然無法知道當前圖片模擬的選項是否是選中狀態了。

要解決此問題也很簡單，我們來看下具體的程式碼思路。

1<！——html片段——>

2

5

8

11<！——JavaScript片段——>

12

大家可以看到，我們給img標籤添加了alt，告訴螢幕閱讀器當前選項的內容是什麼，然後我們添加了role=“radio”，這是告訴螢幕閱讀器當前的控制元件型別是radio而不是img，因為radio才會有選擇的狀態而img是沒有的，其次我們還添加了aria-checked=“problema_checked”，這是告訴螢幕閱讀器當前的選中狀態，如果為True則為選中，如果為False則沒有選中，problema_checked這個變數是我們在data中定義的，當點選第一個選擇時觸發problema_btn（）方法，在此方法中將this。problema_checked變數的值設定為True，此時螢幕閱讀器就可以獲取到當前的選項的選中狀態了。

接下來我們還需要解決一個問題，當用戶切換路由時，進入到新頁面後我們希望將螢幕閱讀器的焦點停留在當前頁面的題目上以便使用者有更好的體驗，

我們來看下程式碼是如何實現的。

1<！——html片段——>

2

3

4

5<！——JavaScript片段——>

6

可以看到我們添加了一個tabindex=“1”（該頁面僅有1個標籤設定了tabindex屬性所以此處可以為1），需要注意的是在Vue2。x環境中且在微信瀏覽器下執行必須要加，否則動態設定螢幕閱讀器的焦點可能會失效。想要實現動態將無障礙焦點設定到這個標題上，我們需要在mounted生命週期的$nextTick（方法中設定focus（）。這樣當我們路由切換的第一時間無障礙焦點就可以在我們指定的位置了。

大家可以注意到，我們設定的無障礙焦點是給p標籤設定的，因為img標籤設定focus（）是不會生效的。因此為了避免使用者觸控到兩個相同的焦點，我們需要遮蔽掉img的無障礙焦點，新增aria-hidden=“true”屬性即可。

完成上述編碼後，一個較為基礎的H5就可以基本滿足被讀屏模式下的視障使用者所訪問了。但同時由於H5可隨意靈活搭配，在大多數情況下，可能會面臨各種各樣並不相同的無障礙問題，如滾動輪播圖，日期時間選擇，各種複雜的自定義控制元件等。所以如果要製作一個較為複雜的H5，想要做好無障礙還是要多下一些功夫的。

在此，我們也呼籲大家多多分享自己的無障礙實操經驗，幫助更多想要做無障礙或不知如何進行無障礙的朋友答疑指路，共同幫助行業良性可持續發展。

以上就是今天和大家分享的內容，如有更多想要溝通交流的內容，歡迎在下方評論區留言。

作者：周富貴

編輯：幽默絲

END