[功能] nvda的基礎網頁操作技巧 - 教學區

[功能] nvda的基礎網頁操作技巧

小羔羊

小羔羊圖像(預設)

2019-08-26 21:32:32

From:220.129.231.68

NVDA的基礎網頁操作技巧

此篇將說明網頁的基本操作技巧,幫助你更快的從網頁上獲取想要的資訊,讓你知道瀏覽網頁不是只能按tab而已,好了,馬上開始囉~


認識網頁上的元件和nvda的單鍵導航

網頁上的內容是由很多元件所組成,那什麼是網頁上的元件呢?
簡單來說,我們在網頁上看到的圖片、文字、連結、按鈕、下拉方塊等等,都是網頁上不同的元件,
每個元件都有不同的屬性和功能,比方說

  • 連結:用來跳轉到其他的頁面
  • 下拉方塊:用一個可以展開的清單來選擇上面的選項
  • 編輯框:用來輸入文字

如果要更具體一點,我們可以把一個網站比喻成一間公司,讓我們一起來想像一下,
公司裡有很多部門,每個部門都有很多員工,
有個部門叫做連結,裡面的每個員工的臉上都寫著地址,他們的工作就是帶領訪客到其他地方,
只要你找到連結部門裡的員工,這個員工就會將你請到公司裡的其他地方,或將你帶到另一間公司裡去,這取決於他們臉上寫的地址通往哪個地方,
也有一個部門叫做圖片,這個部門裡的每個員工都很有趣,因為他們的身上有著各式各樣的圖案或影像,看起來比較容易讓人理解,相較於文字也比較印象深刻,所以廣受訪客的喜愛,
還有一個部門叫做編輯框,他們的員工都喜歡拿著一張紙,他們的工作就是給來公司參觀的訪客填寫文字的,編輯框的員工比較特別一點,他們有時候是幫訪客儲存一些文字到公司裡,有時候可以幫訪客找到其他部門的員工,有時候要進入某些特別的房間也必須透過他們來填寫資料才能進去,
當然還有很多其他的部門,而這些不同的部門都有一個大老闆,這個大老闆可以決定每個員工要在公司裡的哪個房間裡工作,他也決定了所有員工的生殺大權,
老闆有時候會給一些員工掛上名牌,例如寫著[第一級標題]的名牌,然後較這個員工去某個位置站崗,來告訴剛進來公司的訪客,這個區域是在公司的哪個區域,
有時候老闆會給連結部門的員工掛名牌,有時候又是給純文字部門的員工掛名牌,這純粹看老闆要怎麼經營這間公司,他愛怎麼來就怎麼來,
也就是說不同部門的員工往往要協同合作,並沒有規定哪個部門的員工一定要待在那裡,不過為了方便訪客參觀公司,像是編輯框部門的員工,就一定是會被擺在顯眼的地方,不然訪客找不到編輯框的員工,轉身走了,老闆還做什麼生意啊


而這些部門就叫做元件,老闆就是網站的開發者,訪客當然就是我們這些瀏覽網頁的人囉
了解每個元件的功能和特性,你能更知道要怎麼跟這些元件互動,
因為對於明眼人來說,他們可以很快的用視覺來了解網頁上的所有資訊,這個區塊有什麼,那個區塊有什麼,一目了然,
而我們因為只能用聽覺或點字顯示器,只能慢慢的從上而下閱讀,很難快速的發掘後面有些什麼東西,
打個比方,假設網頁上有100個連結,在第65個連結之後有個編輯框,
在以前用導盲鼠時,我只會慢慢的用tab切到編輯框,
如果從網頁開頭開始按tab就要經過65個連結,如果從網頁末尾按shift+tab切回去也要經過35個連結,這樣豈不是網頁元件越多、越複雜我們就要切到手痠嗎,
對於明眼人滑鼠一點就能直接輸入文字的編輯框,難道我們就只能一項一項的切?
所以偉大的nvda團隊就開發出了單鍵導航的功能,讓我們可以透過簡單幾個按鍵,就找到想互動的元件,
以上面的例子來說,我們只要按一次e,就能跳到編輯框,這大大提高了我們操作網頁上的效率
再拿幾個例子來說,
在網頁上按h的時候,就能快速的跳轉到有標題這個屬性的元件上,
按k的時候,就能快速的跳轉到有連結這個屬性的元件上,
我們透過這些方式,來在網頁中快速的在不同的元件中跳轉,這對於我們操作有著複雜元件的網頁將會事半功倍,


網頁上的操作技巧

另外,nvda在網頁上還分為兩種模式,

  • 第一種是瀏覽模式,
    在瀏覽模式下,我們可以利用單鍵導航的功能,來跳轉到網頁上不同的元件,快速的瀏覽內容,
    我們也可以用上、下方向鍵來像瀏覽記事本那般,來瀏覽整個網頁,我們可以看到所有的元件跟純文字內容,
    也可以按tab鍵在不同的元件中跳轉,瀏覽整個網頁,但這種瀏覽網頁的方式是看不到純文字的,
    只能看到我們可以互動的元件,例如連結或下拉方塊、編輯框等等,
  • 第二種是焦點模式,
    在切換成焦點模式的時候,你會聽到喀擦聲,我們按tab經過編輯框或下拉方塊的時候就會聽到這種聲音,
    直到再按tab離開編輯框時,你會聽到咚一聲,這時代表又切回瀏覽模式了,
    那焦點模式下到底能拿來幹嘛?,他有什麼用呢?
    焦點模式是用來告訴電腦,我們要跟這個項目做互動,
    不過他只能拿來做一些事,例如在編輯框裡輸入文字,在下拉方塊上來選取想要的項目,
    在這個時候,單鍵導航是沒有用的,按上下左右方向鍵也不能用來瀏覽網頁,不過這時按tab仍然能看到其他在網頁上的元件

我想這個模式是為了區分我們輸入文字跟使用單鍵導航的狀態,
要注意的是,當我們按tab路過編輯框時,如果自動轉為焦點模式,我們可以按esc鍵來從焦點模式切回瀏覽模式,
但如果我們在其他地方按nvda+空格鍵切換成焦點模式,按esc鍵是不能切回瀏覽模式的,你必須在按一次nvda+空格鍵才能切換回瀏覽模式


接下來,我來介紹大家一些比較常會用到的單鍵導航按鍵,
因為單鍵導航比較多,為了方便記憶,以方便我們直接應用在生活中,所以你可以只記我推薦的快速鍵,
當然,如果你的腦子很好使,你可以全部記起來,那你將如虎添翼,
我還會附加一些網頁上會用到的快速鍵,一起整理給大家,後面還有推薦網頁上使用的nvda插件,你可以選擇是否要進行安裝


推薦快速鍵和小技巧

  • nvda+空格鍵 在瀏覽模式和焦點模式中切換
  • 上、下方向鍵 在瀏覽模式下可以瀏覽到網頁中的純文字內容
  • nvda+ctrl+f 開啟一個對話框,在裡面輸入文字按enter可以搜尋文件裡符合文字的內容
  • NVDA+F3 在目前文件中向後尋找前次搜尋的文字。
  • NVDA+Shift+F3 在目前文件中向前尋找前次搜尋的文字。
  • 如在記事本上的複製文字,例如看到想複製的文字,你可以壓住shift,接著按右方向鍵來選取文字,再案ctrl+c複製所選取的文字,
  • 或在文章開頭按nvda+f9,在文章末尾按nvda+按兩次f10,就能複製從開始標記到結束標記之間的所有文字
    成功的話你會聽到[將選取區段內的文字複製到剪貼簿],你就可以將這些文字貼到記事本或其他地方

單鍵導航
下列的按鍵,若僅按該單一鍵,則會跳至其對應的後一個元件位置,如果同時按 Shift+該單一按鍵,則會跳至前一個元件位置。

  • • h: 標題 (heading)
  • • k: 連結 (link)
  • • n: 非連結文字 (nonLinked text)
  • • e: 編輯區 (edit field)
  • • b: 按鈕 (button)
  • • 主鍵盤上的1到6: 第一層級到第六層級標題。

還有一些用單鍵瀏覽操作網頁的經驗,你可以參考一下,比方說

  • 當我們想快速跳到網頁上的正文內容時,你就可以按
    n 來快速跳到連結後的純文字區塊,通常網頁的正文上面都會有連結,所以這個鍵很管用
    不過有時候可能需要多按幾次n才能看的到正文喔,這就取決於網站的設計了,通常在同一個網站內的不同頁面都會用差不多的介面
  • 當我們想下載檔案時,可以按
    k 用來在連結間跳轉,通常網站上的下載連結都是用連結,
    不過並非所有網站,像特種兵架設的下載平台,下載項目反而是[按鈕],這時按k可找不到喔
  • 另外,像是網頁上[確定]或[登入]以及下載平台,這些項目大部分都是按鈕的屬性,那我們就可以按
    b 來快速的找到這些按鈕,十分方便
  • 最後,網頁上用來分別不同的區塊,大多會有標題的屬性,這時我們按
    h 就能快速的跳轉到這些標題上,你可以仔細聽一下,會發現標題也會分層級,
  • 第一級標題通常是最大的,最常被用來當作網頁一開始的標題層級,依序裁示2、3、4、5、6等等,像是nvda官方首頁網頁最上面的標題就是用第一級標題,
    我們可以利用這些標題的層級來跳轉到我們想抵達的區域,這會比按h在所有的標題裡跳轉還要快,而要跳轉不同層級的標題,就按
    大鍵盤數字1到6 ,比方說要跳到第二級標題,就按數字2,要跳回之前的第二級標題就按shift+數字2,以此類推,
    要注意的是,是大鍵盤的數字鍵,而不是九宮格的數字鍵喔

其他的快速鍵

  • NVDA+f7 列出在此文件內的元件清單
  • esc鍵 從焦點模式回到瀏覽模式,但不一定都管用

下列的按鍵,若僅按該單一鍵,則會跳至其對應的後一個元件位置,如果同時按 Shift+該單一按鍵,則會跳至前一個元件位置。

  • • l: 清單 (list)
  • • i: 清單項目 (list item)
  • • t: 表格 (table)
  • • f: 表單區 (form field)
  • • u: 未造訪過的連結 (unvisited link)
  • • v: 已造訪過的連結 (visited link)
  • • x: 核取方塊 (checkbox)
  • • c: 下拉式方塊 (combo box)
  • • r: 選擇鈕 (radio button)
  • • q: 引述 (block quote)
  • • s: 分隔線 (separator)
  • • m: 頁框 (frame)
  • • g: 圖片 (graphic)
  • • d: 地標 (landmark)
  • • o: 嵌入式物件(音訊和影片播放程式、應用程式、對話框、等) (embedded object)
  • • a: 註記(註解、修訂、等) (annotation)
  • • w: 拼字錯誤 (spelling error)

推薦的nvda附加元件

這個插件可以讓我們在網頁上標記某個位置當作書籤,如果要下載這個插件,就
點我下載placeMarkers-13.0
關於這個nvda附加元件的說明,你可以
參考這個網站
你可以用firefox或chrome來翻譯這個網頁,關於firefox如何翻譯,你可以參考
firefox的插件
附加元件裡面也有中文說明,不過要自己去幫助的文檔裡找才有,
此篇就先介紹到這囉

最後更新:2019-08-31 05:57:10

From: 111.241.69.236

By: 小羔羊