From 155ff3fb9cd0c6b29b6ad8cafb2dafeb989454d6 Mon Sep 17 00:00:00 2001 From: Neil Date: Sat, 25 Sep 2021 15:03:09 +0800 Subject: Partly translate Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning, zh-TW (#2553) --- .../svelte_todo_list_beginning/index.html | 40 +++++++++++----------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.html b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.html index 508a6a2590..6c844262f7 100644 --- a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.html +++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.html @@ -133,9 +133,9 @@ export default app

basic component rendering which a title that says 'Svelte to-do list'

-

Adding static markup

+

加上靜態標記

-

For the moment we will start with a static markup representation of our app, so you can see what it will look like. Copy and paste the following into our Todos.svelte component file, replacing the existing content:

+

我們將會從應用程式的靜態標記表示開始，所以你將會看到它長什麼樣子。複製並貼上下面內容至Todos.svelte元件檔案以取代現有內容：

<!-- Todos.svelte -->
 <div class="todoapp stack-large">
@@ -258,27 +258,27 @@ export default app
</div> -

Check the rendered out again, and you'll see something like this:

+

再次確認已經渲染出來的畫面，你應該會看到如下樣子：

A todo list app, but unstyled, with a title of `what needs to be done`, inputs, checkboxes, etc.

-

The HTML markup above is not very nicely styled and it's also functionally useless. Nevertheless, let's have a look at the markup and see how it relates to our desired features:

+

上面HTML標記的樣式並不是那麼好看，而且也沒有實際功能。儘管如此，接著來看看它和我們想要的功能如何關聯起來：

-

In subsequent articles we'll get all these features working, and more besides.

+

隨後的文章我們會逐一將這些功能完善，以及除此之外的功能等等。

-

Accessibility features of the todo list

+

待辦清單的無障礙特徵

-

You may notice some unusual attributes here. For example:

+

你可能有注意到一些特殊的屬性。例如：

<button class="btn toggle-btn" aria-pressed="true">
   <span class="visually-hidden">Show</span>
@@ -286,19 +286,19 @@ export default app
<span class="visually-hidden">tasks</span> </button> -

Here, aria-pressed tells assistive technology (like screen readers) that the button can be in one of two states: pressed or unpressed. Think of these as analogs for on and off. Setting a value of true means that the button is pressed by default.

+

在這裡，aria-pressed告訴輔助技術（像是螢幕閱讀器）按鈕可以是兩狀態其中之一：pressed或unpressed。可以想像類似於開關狀態。設定數值為true時，意謂著按鈕預設是被按下的。

-

The class visually-hidden has no effect yet, because we have not included any CSS. Once we have put our styles in place, though, any element with this class will be hidden from sighted users and still available to screen reader users — this is because these words are not needed by sighted users; they are there to provide more information about what the button does for screenreader users that do not have the extra visual context to help them.

+

visually-hidden類別現在還沒有效果，因為我們還沒引入任何CSS。一旦引入我們的樣式後，對於可以看見的使用者們會隱藏那些具有此類別的元素並仍能夠讓那些螢幕閱讀器使用者來使用——這是因為這些文字並不需要給可以看見的使用者看到；它們提供更多資訊讓那些螢幕閱讀器使用者了解按鈕實際可以做什麼，而不需要借助一些額外的視覺環境來幫助他們。

-

Further down, you can find the following <ul> element:

+

在往下看一點，你可以找到如下<ul>元素：

<ul role="list" className="todo-list stack-large" aria-labelledby="list-heading">
-

The role attribute helps assistive technology explain what kind of semantic value an element has — or what its purpose is. A <ul> is treated like a list by default, but the styles we're about to add will break that functionality. This role will restore the "list" meaning to the <ul>  element. If you want to learn more about why this is necessary, you can check out Scott O'Hara’s article, “Fixing Lists”.

+

role屬性則幫助輔助技術去解釋元素具有什麼種類的語義數值——或它的目的。預設情況下，<ul>會被視為清單，但在加上樣式之後會破壞原有性質。明確定義規則為「list」將能復原<ul>元素本身意義。假如你想要知道更多為什麼需要明確定義的話，可以去參考Scott O'Hara’s的「Fixing Lists」文章。

-

The aria-labelledby attribute tells assistive technologies that we're treating our <h2> with an id of list-heading as the label that describes the purpose of the list beneath it. Making this association gives the list a more informative context, which could help screen reader users better understand the purpose of it.

+

aria-labelledby屬性則告訴輔助技術，我們把<h2>且id為list-heading作為描述下面清單用途的標籤。建立這種關聯為清單提供更多上下文資訊，這可以幫助螢幕閱讀器使用者更好地去了解它的目的。

-

This seems like a good time to talk about how Svelte deals with accessibility; let's do that now.

+

這似乎是討論Svelte如何處理無障礙性的好時機；讓我們繼續看下去。

Svelte accessibility support

-- cgit v1.2.3-54-g00ecf